| OLD | NEW |
| 1 paper-slider | 1 paper-slider |
| 2 ============ | 2 ============ |
| 3 | 3 |
| 4 `paper-slider` allows user to select a value from a range of values by | 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 | 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, | 6 great choice for settings that reflect intensity levels, such as volume, |
| 7 brightness, or color saturation. | 7 brightness, or color saturation. |
| 8 | 8 |
| 9 Example: | 9 Example: |
| 10 | 10 |
| (...skipping 14 matching lines...) Expand all Loading... |
| 25 ----------------|-------------|---------- | 25 ----------------|-------------|---------- |
| 26 `--paper-slider-bar-color` | The background color of the slider | `transparent` | 26 `--paper-slider-bar-color` | The background color of the slider | `transparent` |
| 27 `--paper-slider-active-color` | The progress bar color | `--google-blue-700` | 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` | 28 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-
blue-300` |
| 29 `--paper-slider-knob-color` | The knob color | `--google-blue-700` | 29 `--paper-slider-knob-color` | The knob color | `--google-blue-700` |
| 30 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-
500` | 30 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-
500` |
| 31 `--paper-slider-pin-color` | The pin color | `--google-blue-700` | 31 `--paper-slider-pin-color` | The pin color | `--google-blue-700` |
| 32 `--paper-slider-font-color` | The pin's text color | `#fff` | 32 `--paper-slider-font-color` | The pin's text color | `#fff` |
| 33 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--go
ogle-grey-500` | 33 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--go
ogle-grey-500` |
| 34 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar
color | `--google-grey-300` | 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` |
| 35 | 36 |
| 36 Example: | 37 Example: |
| 37 | 38 |
| 38 ``` | 39 ``` |
| 39 paper-slider { | 40 paper-slider { |
| 40 --paper-slider-bar-color: #fff; | 41 --paper-slider-bar-color: #fff; |
| 41 --paper-slider-active-color: #0f9d58; | 42 --paper-slider-active-color: #0f9d58; |
| 42 --paper-slider-knob-color: #0f9d58; | 43 --paper-slider-knob-color: #0f9d58; |
| 43 --paper-slider-pin-color: #0f9d58; | 44 --paper-slider-pin-color: #0f9d58; |
| 44 --paper-slider-font-color: #0f9d58; | 45 --paper-slider-font-color: #0f9d58; |
| 45 --paper-slider-secondary-color: #0f9d58; | 46 --paper-slider-secondary-color: #0f9d58; |
| 46 --paper-slider-disabled-active-color: #ccc; | 47 --paper-slider-disabled-active-color: #ccc; |
| 47 --paper-slider-disabled-secondary-color: #ccc; | 48 --paper-slider-disabled-secondary-color: #ccc; |
| 49 --paper-slider-height: 5px; |
| 48 } | 50 } |
| 49 ``` | 51 ``` |
| OLD | NEW |