OLD | NEW |
1 paper-slider | 1 |
2 ============ | 2 <!--- |
3 | 3 |
| 4 This README is automatically generated from the comments in these files: |
| 5 paper-slider.html |
| 6 |
| 7 Edit those files, and our readme bot will duplicate them over here! |
| 8 Edit this file, and the bot will squash your changes :) |
| 9 |
| 10 --> |
| 11 |
| 12 [](https://travis-ci.org/PolymerElements/paper-slider) |
| 13 |
| 14 _[Demo and API Docs](https://elements.polymer-project.org/elements/paper-slider)
_ |
| 15 |
| 16 |
| 17 ##<paper-slider> |
| 18 |
| 19 |
| 20 Material design: [Sliders](https://www.google.com/design/spec/components/sliders
.html) |
| 21 |
4 `paper-slider` allows user to select a value from a range of values by | 22 `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 | 23 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, | 24 great choice for settings that reflect intensity levels, such as volume, |
7 brightness, or color saturation. | 25 brightness, or color saturation. |
8 | 26 |
9 Example: | 27 Example: |
10 | 28 |
11 ```html | 29 <paper-slider></paper-slider> |
12 <paper-slider></paper-slider> | |
13 ``` | |
14 | 30 |
15 Use `min` and `max` to specify the slider range. Default is `0` to `100`. For ex
ample: | 31 Use `min` and `max` to specify the slider range. Default is 0 to 100. |
16 ```html | |
17 <paper-slider min="10" max="200" value="110"></paper-slider> | |
18 ``` | |
19 | 32 |
20 ### Styling slider | 33 Example: |
| 34 |
| 35 <paper-slider min="10" max="200" value="110"></paper-slider> |
| 36 |
| 37 ### Styling |
21 | 38 |
22 The following custom properties and mixins are available for styling: | 39 The following custom properties and mixins are available for styling: |
23 | 40 |
24 Custom property | Description | Default | 41 Custom property | Description | Default |
25 ----------------|-------------|---------- | 42 ----------------|-------------|---------- |
26 `--paper-slider-bar-color` | The background color of the slider | `transparent` | 43 `--paper-slider-bar-color` | The background color of the slider | `transparent` |
27 `--paper-slider-active-color` | The progress bar color | `--google-blue-700` | 44 `--paper-slider-active-color` | The progress bar color | `--google-blue-700` |
28 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-
blue-300` | 45 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-
blue-300` |
29 `--paper-slider-knob-color` | The knob color | `--google-blue-700` | 46 `--paper-slider-knob-color` | The knob color | `--google-blue-700` |
30 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-
500` | 47 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-
500` |
31 `--paper-slider-pin-color` | The pin color | `--google-blue-700` | 48 `--paper-slider-pin-color` | The pin color | `--google-blue-700` |
32 `--paper-slider-font-color` | The pin's text color | `#fff` | 49 `--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` | 50 `--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` | 51 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar
color | `--google-grey-300` |
| 52 `--paper-slider-knob-start-color` | The fill color of the knob at the far left |
`transparent` |
| 53 `--paper-slider-knob-start-border-color` | The border color of the knob at the f
ar left | `#c8c8c8` |
| 54 `--paper-slider-pin-start-color` | The color of the pin at the far left | `#c8c8
c8` |
35 `--paper-slider-height` | Height of the progress bar | `2px` | 55 `--paper-slider-height` | Height of the progress bar | `2px` |
36 | 56 |
37 Example: | |
38 | 57 |
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 ``` | |
OLD | NEW |