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 `--paper-slider-knob-start-color` | The fill color of the knob at the far left | `transparent`
  51 `--paper-slider-knob-start-border-color` | The border color of the knob at the far left | `#c8c8c8`
  52 `--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8c8`
  53 `--paper-slider-height` | Height of the progress bar | `2px`
  54
  55 @group Paper Elements
  56 @element paper-slider
  57 @demo demo/index.html
  58 @hero hero.svg
  59 -->
  60
  61 </head><body><dom-module id="paper-slider">
  62
  63   <link rel="import" type="css" href="paper-slider.css">
  64
  65   <template>
  66     <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
  67
  68       <div class="bar-container">
  69         <paper-progress disabled$="[[disabled]]" 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">
  70         </paper-progress>
  71       </div>
  72
  73       <template is="dom-if" if="[[snaps]]">
  74         <div class="slider-markers horizontal layout">
  75           <template is="dom-repeat" items="[[markers]]">
  76             <div class="slider-marker flex"></div>
  77           </template>
  78         </div>
  79       </template>
  80
  81       <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
  82           <paper-ripple center="" id="ink" class="circle" hidden$="[[!receivedFocusFromKeyboard]]">
  83           </paper-ripple>
  84           <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
  85       </div>
  86     </div>
  87
  88     <template is="dom-if" if="[[editable]]">
  89       <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange" value="[[_fixForInput(immediateValue)]]">
  90       </paper-input>
  91     </template>
  92   </template>
  93
  94 </dom-module>
  95
  96 <script src="paper-slider-extracted.js"></script></body></html>