OLD | NEW |
| (Empty) |
1 | |
2 <!--- | |
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 [![Build Status](https://travis-ci.org/PolymerElements/paper-slider.svg?branch=m
aster)](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 | |
22 `paper-slider` allows user to select a value from a range of values by | |
23 moving the slider thumb. The interactive nature of the slider makes it a | |
24 great choice for settings that reflect intensity levels, such as volume, | |
25 brightness, or color saturation. | |
26 | |
27 Example: | |
28 | |
29 <paper-slider></paper-slider> | |
30 | |
31 Use `min` and `max` to specify the slider range. Default is 0 to 100. | |
32 | |
33 Example: | |
34 | |
35 <paper-slider min="10" max="200" value="110"></paper-slider> | |
36 | |
37 ### Styling | |
38 | |
39 The following custom properties and mixins are available for styling: | |
40 | |
41 Custom property | Description | Default | |
42 ----------------|-------------|---------- | |
43 `--paper-slider-bar-color` | The background color of the slider | `transparent` | |
44 `--paper-slider-active-color` | The progress bar color | `--google-blue-700` | |
45 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-
blue-300` | |
46 `--paper-slider-knob-color` | The knob color | `--google-blue-700` | |
47 `--paper-slider-disabled-knob-color` | The disabled knob color | `--paper-grey-4
00` | |
48 `--paper-slider-pin-color` | The pin color | `--google-blue-700` | |
49 `--paper-slider-font-color` | The pin's text color | `#fff` | |
50 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--pa
per-grey-400` | |
51 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar
color | `--paper-grey-400` | |
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 | `--paper-grey-400` | |
54 `--paper-slider-pin-start-color` | The color of the pin at the far left | `--pap
er-grey-400` | |
55 `--paper-slider-height` | Height of the progress bar | `2px` | |
56 `--paper-slider-input` | Mixin applied to the input in editable mode | `{}` | |
57 | |
58 | |
OLD | NEW |