third_party/polymer/v1_0/components-chromium/paper-slider/paper-slider.html

   1 <!--
   2 @license
   3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
   4 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7 Code distributed by Google as part of the polymer project is also
   8 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 --><html><head><link rel="import" href="../polymer/polymer.html">
  10 <link rel="import" href="../paper-styles/paper-styles.html">
  11 <link rel="import" href="../paper-progress/paper-progress.html">
  12 <link rel="import" href="../paper-input/paper-input.html">
  13 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
  14 <link rel="import" href="../paper-ripple/paper-ripple.html">
  15 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
  16 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
  17 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
  18
  19 <!--
  20 `paper-slider` allows user to select a value from a range of values by
  21 moving the slider thumb.  The interactive nature of the slider makes it a
  22 great choice for settings that reflect intensity levels, such as volume,
  23 brightness, or color saturation.
  24
  25 Example:
  26
  27     <paper-slider></paper-slider>
  28
  29 Use `min` and `max` to specify the slider range.  Default is 0 to 100.
  30
  31 Example:
  32
  33     <paper-slider min="10" max="200" value="110"></paper-slider>
  34
  35 ### Styling
  36
  37 The following custom properties and mixins are available for styling:
  38
  39 Custom property | Description | Default
  40 ----------------|-------------|----------
  41 `--paper-slider-bar-color` | The background color of the slider | `transparent`
  42 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
  43 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
  44 `--paper-slider-knob-color` | The knob color | `--google-blue-700`
  45 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-500`
  46 `--paper-slider-pin-color` | The pin color | `--google-blue-700`
  47 `--paper-slider-font-color` | The pin's text color | `#fff`
  48 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500`
  49 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
  50
  51 @group Paper Elements
  52 @element paper-slider
  53 @demo demo/index.html
  54 @hero hero.svg
  55 -->
  56
  57 </head><body><dom-module id="paper-slider">
  58
  59   <link rel="import" type="css" href="paper-slider.css">
  60
  61   <template>
  62     <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
  63
  64       <div class="bar-container">
  65         <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
  66         </paper-progress>
  67       </div>
  68
  69       <template is="dom-if" if="[[snaps]]">
  70         <div class="slider-markers horizontal layout">
  71           <template is="dom-repeat" items="[[markers]]">
  72             <div class="slider-marker flex"></div>
  73           </template>
  74         </div>
  75       </template>
  76
  77       <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
  78           <paper-ripple id="ink" class="circle" center="" hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
  79           <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
  80       </div>
  81     </div>
  82
  83     <template is="dom-if" if="[[editable]]">
  84       <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange">
  85       </paper-input>
  86     </template>
  87   </template>
  88
  89 </dom-module>
  90
  91 <script src="paper-slider-extracted.js"></script></body></html>