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 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 | `--go
ogle-grey-500` | |
34 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar
color | `--google-grey-300` | |
35 | |
36 Example: | |
37 | |
38 ``` | |
39 paper-slider { | |
40 --paper-slider-bar-color: #fff; | |
41 --paper-slider-active-color: #0f9d58; | |
42 --paper-slider-knob-color: #0f9d58; | |
43 --paper-slider-pin-color: #0f9d58; | |
44 --paper-slider-font-color: #0f9d58; | |
45 --paper-slider-secondary-color: #0f9d58; | |
46 --paper-slider-disabled-active-color: #ccc; | |
47 --paper-slider-disabled-secondary-color: #ccc; | |
48 } | |
49 ``` | |
OLD | NEW |