OLD | NEW |
(Empty) | |
| 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 ex
ample: |
| 16 ```html |
| 17 <paper-slider min="10" max="200" value="110"></paper-slider> |
| 18 ``` |
| 19 |
| 20 ### Styling slider |
| 21 |
| 22 To change the slider progress bar color: |
| 23 ```css |
| 24 paper-slider { |
| 25 --paper-slider-active-color: #0f9d58; |
| 26 } |
| 27 ``` |
| 28 |
| 29 To change the slider knob color: |
| 30 ```css |
| 31 paper-slider { |
| 32 --paper-slider-knob-color: #0f9d58; |
| 33 } |
| 34 ``` |
| 35 |
| 36 To change the slider pin color: |
| 37 ```css |
| 38 paper-slider { |
| 39 --paper-slider-pin-color: #0f9d58; |
| 40 } |
| 41 ``` |
| 42 |
| 43 To change the slider pin's font color: |
| 44 ```css |
| 45 paper-slider { |
| 46 --paper-slider-pin-font-color: #0f9d58; |
| 47 } |
| 48 ``` |
| 49 |
| 50 To change the slider secondary progress bar color: |
| 51 ```css |
| 52 paper-slider { |
| 53 --paper-slider-secondary-color: #0f9d58; |
| 54 } |
| 55 ``` |
| 56 |
| 57 To change the slider disabled active color: |
| 58 ```css |
| 59 paper-slider { |
| 60 --paper-slider-disabled-active-color: #ccc; |
| 61 } |
| 62 ``` |
| 63 |
| 64 To change the slider disabled secondary progress bar color: |
| 65 ```css |
| 66 paper-slider { |
| 67 --paper-slider-disabled-secondary-color: #ccc; |
| 68 } |
| 69 ``` |
OLD | NEW |