OLD | NEW |
| (Empty) |
1 <!-- | |
2 @license | |
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.txt | |
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.txt | |
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.txt | |
9 --> | |
10 | |
11 <link rel="import" href="../polymer/polymer.html"> | |
12 | |
13 <script> | |
14 | |
15 /** | |
16 * `iron-range-behavior` provides the behavior for something with a minimum to m
aximum range. | |
17 * | |
18 * @demo demo/index.html | |
19 * @polymerBehavior | |
20 */ | |
21 Polymer.IronRangeBehavior = { | |
22 | |
23 properties: { | |
24 | |
25 /** | |
26 * The number that represents the current value. | |
27 */ | |
28 value: { | |
29 type: Number, | |
30 value: 0, | |
31 notify: true, | |
32 reflectToAttribute: true | |
33 }, | |
34 | |
35 /** | |
36 * The number that indicates the minimum value of the range. | |
37 */ | |
38 min: { | |
39 type: Number, | |
40 value: 0, | |
41 notify: true | |
42 }, | |
43 | |
44 /** | |
45 * The number that indicates the maximum value of the range. | |
46 */ | |
47 max: { | |
48 type: Number, | |
49 value: 100, | |
50 notify: true | |
51 }, | |
52 | |
53 /** | |
54 * Specifies the value granularity of the range's value. | |
55 */ | |
56 step: { | |
57 type: Number, | |
58 value: 1, | |
59 notify: true | |
60 }, | |
61 | |
62 /** | |
63 * Returns the ratio of the value. | |
64 */ | |
65 ratio: { | |
66 type: Number, | |
67 value: 0, | |
68 readOnly: true, | |
69 notify: true | |
70 }, | |
71 }, | |
72 | |
73 observers: [ | |
74 '_update(value, min, max, step)' | |
75 ], | |
76 | |
77 _calcRatio: function(value) { | |
78 return (this._clampValue(value) - this.min) / (this.max - this.min); | |
79 }, | |
80 | |
81 _clampValue: function(value) { | |
82 return Math.min(this.max, Math.max(this.min, this._calcStep(value))); | |
83 }, | |
84 | |
85 _calcStep: function(value) { | |
86 /** | |
87 * if we calculate the step using | |
88 * `Math.round(value / step) * step` we may hit a precision point issue | |
89 * eg. 0.1 * 0.2 = 0.020000000000000004 | |
90 * http://docs.oracle.com/cd/E19957-01/806-3568/ncg_goldberg.html | |
91 * | |
92 * as a work around we can divide by the reciprocal of `step` | |
93 */ | |
94 return this.step ? (Math.round(value / this.step) / (1 / this.step)) : value
; | |
95 }, | |
96 | |
97 _validateValue: function() { | |
98 var v = this._clampValue(this.value); | |
99 this.value = this.oldValue = isNaN(v) ? this.oldValue : v; | |
100 return this.value !== v; | |
101 }, | |
102 | |
103 _update: function() { | |
104 this._validateValue(); | |
105 this._setRatio(this._calcRatio(this.value) * 100); | |
106 } | |
107 | |
108 }; | |
109 </script> | |
OLD | NEW |