third_party/polymer/v1_0/components-chromium/paper-slider/README.md

   1 paper-slider
   2 ============
   3
   4 `paper-slider` allows user to select a value from a range of values by
   5 moving the slider thumb.  The interactive nature of the slider makes it a
   6 great choice for settings that reflect intensity levels, such as volume,
   7 brightness, or color saturation.
   8
   9 Example:
  10
  11 ```html
  12 <paper-slider></paper-slider>
  13 ```
  14
  15 Use `min` and `max` to specify the slider range. Default is `0` to `100`. For example:
  16 ```html
  17 <paper-slider min="10" max="200" value="110"></paper-slider>
  18 ```
  19
  20 ### Styling slider
  21
  22 The following custom properties and mixins are available for styling:
  23
  24 Custom property | Description | Default
  25 ----------------|-------------|----------
  26 `--paper-slider-bar-color` | The background color of the slider | `transparent`
  27 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
  28 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
  29 `--paper-slider-knob-color` | The knob color | `--google-blue-700`
  30 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-500`
  31 `--paper-slider-pin-color` | The pin color | `--google-blue-700`
  32 `--paper-slider-font-color` | The pin's text color | `#fff`
  33 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--google-grey-500`
  34 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar color | `--google-grey-300`
  35 `--paper-slider-height` | Height of the progress bar | `2px`
  36
  37 Example:
  38
  39 ```
  40 paper-slider {
  41   --paper-slider-bar-color: #fff;
  42   --paper-slider-active-color: #0f9d58;
  43   --paper-slider-knob-color: #0f9d58;
  44   --paper-slider-pin-color: #0f9d58;
  45   --paper-slider-font-color: #0f9d58;
  46   --paper-slider-secondary-color: #0f9d58;
  47   --paper-slider-disabled-active-color: #ccc;
  48   --paper-slider-disabled-secondary-color: #ccc;
  49   --paper-slider-height: 5px;
  50 }
  51 ```