OLD | NEW |
1 <!-- | 1 <!-- |
2 @license | 2 @license |
3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. | 3 Copyright (c) 2015 The Polymer Project Authors. All rights reserved. |
4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE | 4 This code may only be used under the BSD style license found at http://polymer.g
ithub.io/LICENSE.txt |
5 The complete set of authors may be found at http://polymer.github.io/AUTHORS | 5 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt |
6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS | 6 The complete set of contributors may be found at http://polymer.github.io/CONTRI
BUTORS.txt |
7 Code distributed by Google as part of the polymer project is also | 7 Code distributed by Google as part of the polymer project is also |
8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS | 8 subject to an additional IP rights grant found at http://polymer.github.io/PATEN
TS.txt |
9 --> | 9 --> |
10 | 10 |
11 <link rel="import" href="../polymer/polymer.html"> | 11 <link rel="import" href="../polymer/polymer.html"> |
12 <link rel="import" href="../paper-styles/paper-styles.html"> | 12 <link rel="import" href="../paper-styles/paper-styles.html"> |
13 <link rel="import" href="../paper-progress/paper-progress.html"> | 13 <link rel="import" href="../paper-progress/paper-progress.html"> |
14 <link rel="import" href="../paper-input/paper-input.html"> | 14 <link rel="import" href="../paper-input/paper-input.html"> |
15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> | 15 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html"> |
16 <link rel="import" href="../paper-ripple/paper-ripple.html"> | 16 <link rel="import" href="../paper-ripple/paper-ripple.html"> |
17 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> | 17 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html
"> |
| 18 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html"> |
18 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio
r.html"> | 19 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavio
r.html"> |
19 | 20 |
20 <!-- | 21 <!-- |
21 `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 |
22 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 |
23 great choice for settings that reflect intensity levels, such as volume, | 24 great choice for settings that reflect intensity levels, such as volume, |
24 brightness, or color saturation. | 25 brightness, or color saturation. |
25 | 26 |
26 Example: | 27 Example: |
27 | 28 |
28 <paper-slider></paper-slider> | 29 <paper-slider></paper-slider> |
29 | 30 |
30 Use `min` and `max` to specify the slider range. Default is 0 to 100. | 31 Use `min` and `max` to specify the slider range. Default is 0 to 100. |
31 | 32 |
32 Example: | 33 Example: |
33 | 34 |
34 <paper-slider min="10" max="200" value="110"></paper-slider> | 35 <paper-slider min="10" max="200" value="110"></paper-slider> |
35 | 36 |
36 Styling slider: | 37 ### Styling |
37 | 38 |
38 To change the slider progress bar color: | 39 The following custom properties and mixins are available for styling: |
39 | 40 |
40 paper-slider { | 41 Custom property | Description | Default |
41 --paper-slider-active-color: #0f9d58; | 42 ----------------|-------------|---------- |
42 } | 43 `--paper-slider-bar-color` | The background color of the slider | `transparent` |
43 | 44 `--paper-slider-active-color` | The progress bar color | `--google-blue-700` |
44 To change the slider knob color: | 45 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-
blue-300` |
45 | 46 `--paper-slider-knob-color` | The knob color | `--google-blue-700` |
46 paper-slider { | 47 `--paper-slider-disabled-knob-color` | The disabled knob color | `--google-grey-
500` |
47 --paper-slider-knob-color: #0f9d58; | 48 `--paper-slider-pin-color` | The pin color | `--google-blue-700` |
48 } | 49 `--paper-slider-font-color` | The pin's text color | `#fff` |
49 | 50 `--paper-slider-disabled-active-color` | The disabled progress bar color | `--go
ogle-grey-500` |
50 To change the slider pin color: | 51 `--paper-slider-disabled-secondary-color` | The disabled secondary progress bar
color | `--google-grey-300` |
51 | |
52 paper-slider { | |
53 --paper-slider-pin-color: #0f9d58; | |
54 } | |
55 | |
56 To change the slider pin's font color: | |
57 | |
58 paper-slider { | |
59 --paper-slider-pin-font-color: #0f9d58; | |
60 } | |
61 | |
62 To change the slider secondary progress bar color: | |
63 | |
64 paper-slider { | |
65 --paper-slider-secondary-color: #0f9d58; | |
66 } | |
67 | |
68 To change the slider disabled active color: | |
69 | |
70 paper-slider { | |
71 --paper-slider-disabled-active-color: #ccc; | |
72 } | |
73 | |
74 To change the slider disabled secondary progress bar color: | |
75 | |
76 paper-slider { | |
77 --paper-slider-disabled-secondary-color: #ccc; | |
78 } | |
79 | 52 |
80 @group Paper Elements | 53 @group Paper Elements |
81 @element paper-slider | 54 @element paper-slider |
82 @demo demo/index.html | 55 @demo demo/index.html |
83 @hero hero.svg | 56 @hero hero.svg |
84 --> | 57 --> |
85 | 58 |
86 <dom-module id="paper-slider"> | 59 <dom-module id="paper-slider"> |
87 | 60 |
88 <link rel="import" type="css" href="paper-slider.css"> | 61 <link rel="import" type="css" href="paper-slider.css"> |
(...skipping 24 matching lines...) Expand all Loading... |
113 </template> | 86 </template> |
114 </div> | 87 </div> |
115 </template> | 88 </template> |
116 | 89 |
117 <div id="sliderKnob" | 90 <div id="sliderKnob" |
118 class="center-justified center horizontal layout" | 91 class="center-justified center horizontal layout" |
119 on-down="_knobdown" | 92 on-down="_knobdown" |
120 on-up="_resetKnob" | 93 on-up="_resetKnob" |
121 on-track="_onTrack" | 94 on-track="_onTrack" |
122 on-transitionend="_knobTransitionEnd"> | 95 on-transitionend="_knobTransitionEnd"> |
123 <paper-ripple id="ink" class="circle" center></paper-ripple> | 96 <paper-ripple id="ink" class="circle" center hidden$="[[!receivedFocus
FromKeyboard]]"></paper-ripple> |
124 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> | 97 <div id="sliderKnobInner" value$="[[immediateValue]]"></div> |
125 </div> | 98 </div> |
126 </div> | 99 </div> |
127 | 100 |
128 <template is="dom-if" if="[[editable]]"> | 101 <template is="dom-if" if="[[editable]]"> |
129 <paper-input | 102 <paper-input |
130 id="input" | 103 id="input" |
131 class="slider-input" | 104 class="slider-input" |
132 disabled$="[[disabled]]" | 105 disabled$="[[disabled]]" |
133 on-change="_inputChange"> | 106 on-change="_inputChange"> |
134 </paper-input> | 107 </paper-input> |
135 </template> | 108 </template> |
136 </template> | 109 </template> |
137 | 110 |
138 </dom-module> | 111 </dom-module> |
139 | 112 |
140 <script> | 113 <script> |
141 /** | |
142 * Fired when the slider's value changes. | |
143 * | |
144 * @event value-change | |
145 */ | |
146 | |
147 /** | |
148 * Fired when the slider's immediateValue changes. | |
149 * | |
150 * @event immediate-value-change | |
151 */ | |
152 | |
153 /** | |
154 * Fired when the slider's value changes due to user interaction. | |
155 * | |
156 * Changes to the slider's value due to changes in an underlying | |
157 * bound variable will not trigger this event. | |
158 * | |
159 * @event change | |
160 */ | |
161 | 114 |
162 Polymer({ | 115 Polymer({ |
163 is: 'paper-slider', | 116 is: 'paper-slider', |
164 | 117 |
165 behaviors: [ | 118 behaviors: [ |
166 Polymer.IronRangeBehavior, | |
167 Polymer.IronA11yKeysBehavior, | 119 Polymer.IronA11yKeysBehavior, |
| 120 Polymer.PaperInkyFocusBehavior, |
168 Polymer.IronFormElementBehavior, | 121 Polymer.IronFormElementBehavior, |
169 Polymer.PaperInkyFocusBehavior | 122 Polymer.IronRangeBehavior |
170 ], | 123 ], |
171 | 124 |
172 properties: { | 125 properties: { |
| 126 |
173 /** | 127 /** |
174 * If true, the slider thumb snaps to tick marks evenly spaced based | 128 * If true, the slider thumb snaps to tick marks evenly spaced based |
175 * on the `step` property value. | 129 * on the `step` property value. |
176 */ | 130 */ |
177 snaps: { | 131 snaps: { |
178 type: Boolean, | 132 type: Boolean, |
179 value: false, | 133 value: false, |
180 notify: true | 134 notify: true |
181 }, | 135 }, |
182 | 136 |
(...skipping 90 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
273 tabindex: 0 | 227 tabindex: 0 |
274 }, | 228 }, |
275 | 229 |
276 keyBindings: { | 230 keyBindings: { |
277 'left down pagedown home': '_decrementKey', | 231 'left down pagedown home': '_decrementKey', |
278 'right up pageup end': '_incrementKey' | 232 'right up pageup end': '_incrementKey' |
279 }, | 233 }, |
280 | 234 |
281 ready: function() { | 235 ready: function() { |
282 // issue polymer/polymer#1305 | 236 // issue polymer/polymer#1305 |
283 | |
284 this.async(function() { | 237 this.async(function() { |
285 this._updateKnob(this.value); | 238 this._updateKnob(this.value); |
286 this._updateInputValue(); | 239 this._updateInputValue(); |
287 }, 1); | 240 }, 1); |
288 }, | 241 }, |
289 | 242 |
290 /** | 243 /** |
291 * Increases value by `step` but not above `max`. | 244 * Increases value by `step` but not above `max`. |
292 * @method increment | 245 * @method increment |
293 */ | 246 */ |
(...skipping 39 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
333 this.secondaryProgress = this._clampValue(this.secondaryProgress); | 286 this.secondaryProgress = this._clampValue(this.secondaryProgress); |
334 }, | 287 }, |
335 | 288 |
336 _updateInputValue: function() { | 289 _updateInputValue: function() { |
337 if (this.editable) { | 290 if (this.editable) { |
338 this.$$('#input').value = this.immediateValue.toString(); | 291 this.$$('#input').value = this.immediateValue.toString(); |
339 } | 292 } |
340 }, | 293 }, |
341 | 294 |
342 _expandKnob: function() { | 295 _expandKnob: function() { |
343 this.$.ink.holdDown = false; | |
344 this._setExpand(true); | 296 this._setExpand(true); |
345 }, | 297 }, |
346 | 298 |
347 _resetKnob: function() { | 299 _resetKnob: function() { |
348 this.cancelDebouncer('expandKnob'); | 300 this.cancelDebouncer('expandKnob'); |
349 this._setExpand(false); | 301 this._setExpand(false); |
350 this.$.ink.hidden = true; | |
351 }, | 302 }, |
352 | 303 |
353 _positionKnob: function(ratio) { | 304 _positionKnob: function(ratio) { |
354 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); | 305 this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio))); |
355 this._setRatio(this._calcRatio(this.immediateValue)); | 306 this._setRatio(this._calcRatio(this.immediateValue)); |
356 | 307 |
357 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; | 308 this.$.sliderKnob.style.left = (this.ratio * 100) + '%'; |
358 }, | 309 }, |
359 | 310 |
360 _inputChange: function() { | 311 _inputChange: function() { |
(...skipping 63 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
424 this._expandKnob(); | 375 this._expandKnob(); |
425 | 376 |
426 // cancel selection | 377 // cancel selection |
427 event.detail.sourceEvent.preventDefault(); | 378 event.detail.sourceEvent.preventDefault(); |
428 | 379 |
429 // set the focus manually because we will called prevent default | 380 // set the focus manually because we will called prevent default |
430 this.focus(); | 381 this.focus(); |
431 }, | 382 }, |
432 | 383 |
433 _bardown: function(event) { | 384 _bardown: function(event) { |
434 this.$.ink.hidden = true; | |
435 | |
436 event.preventDefault(); | |
437 | |
438 this._w = this.$.sliderBar.offsetWidth; | 385 this._w = this.$.sliderBar.offsetWidth; |
439 var rect = this.$.sliderBar.getBoundingClientRect(); | 386 var rect = this.$.sliderBar.getBoundingClientRect(); |
440 var ratio = (event.detail.x - rect.left) / this._w; | 387 var ratio = (event.detail.x - rect.left) / this._w; |
441 var prevRatio = this.ratio; | 388 var prevRatio = this.ratio; |
442 | 389 |
443 this._setTransiting(true); | 390 this._setTransiting(true); |
444 | 391 |
445 this._positionKnob(ratio); | 392 this._positionKnob(ratio); |
446 | 393 |
447 this.debounce('expandKnob', this._expandKnob, 60); | 394 this.debounce('expandKnob', this._expandKnob, 60); |
(...skipping 57 matching lines...) Expand 10 before | Expand all | Expand 10 after Loading... |
505 }, | 452 }, |
506 | 453 |
507 _decrementKey: function(event) { | 454 _decrementKey: function(event) { |
508 if (event.detail.key === 'home') { | 455 if (event.detail.key === 'home') { |
509 this.value = this.min; | 456 this.value = this.min; |
510 } else { | 457 } else { |
511 this.decrement(); | 458 this.decrement(); |
512 } | 459 } |
513 this.fire('change'); | 460 this.fire('change'); |
514 } | 461 } |
515 }) | 462 }); |
| 463 |
| 464 /** |
| 465 * Fired when the slider's value changes. |
| 466 * |
| 467 * @event value-change |
| 468 */ |
| 469 |
| 470 /** |
| 471 * Fired when the slider's immediateValue changes. |
| 472 * |
| 473 * @event immediate-value-change |
| 474 */ |
| 475 |
| 476 /** |
| 477 * Fired when the slider's value changes due to user interaction. |
| 478 * |
| 479 * Changes to the slider's value due to changes in an underlying |
| 480 * bound variable will not trigger this event. |
| 481 * |
| 482 * @event change |
| 483 */ |
| 484 |
516 </script> | 485 </script> |
OLD | NEW |