| 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 |