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 |
11 ```html | 11 ```html |
12 <paper-slider></paper-slider> | 12 <paper-slider></paper-slider> |
13 ``` | 13 ``` |
14 | 14 |
15 Use `min` and `max` to specify the slider range. Default is `0` to `100`. For ex
ample: | 15 Use `min` and `max` to specify the slider range. Default is `0` to `100`. For ex
ample: |
16 ```html | 16 ```html |
17 <paper-slider min="10" max="200" value="110"></paper-slider> | 17 <paper-slider min="10" max="200" value="110"></paper-slider> |
18 ``` | 18 ``` |
19 | 19 |
20 ### Styling slider | 20 ### Styling slider |
21 | 21 |
22 To change the slider progress bar color: | 22 The following custom properties and mixins are available for styling: |
23 ```css | 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 ``` |
24 paper-slider { | 39 paper-slider { |
| 40 --paper-slider-bar-color: #fff; |
25 --paper-slider-active-color: #0f9d58; | 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; |
26 } | 48 } |
27 ``` | 49 ``` |
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 |