1 2 3 Polymer('core-range', { 4 5 /** 6 * The number that represents the current value. 7 * 8 * @attribute value 9 * @type number 10 * @default 0 11 */ 12 value: 0, 13 14 /** 15 * The number that indicates the minimum value of the range. 16 * 17 * @attribute min 18 * @type number 19 * @default 0 20 */ 21 min: 0, 22 23 /** 24 * The number that indicates the maximum value of the range. 25 * 26 * @attribute max 27 * @type number 28 * @default 100 29 */ 30 max: 100, 31 32 /** 33 * Specifies the value granularity of the range's value. 34 * 35 * @attribute step 36 * @type number 37 * @default 1 38 */ 39 step: 1, 40 41 /** 42 * Returns the ratio of the value. 43 * 44 * @attribute ratio 45 * @type number 46 * @default 0 47 */ 48 ratio: 0, 49 50 observe: { 51 'value min max step': 'update' 52 }, 53 54 calcRatio: function(value) { 55 return (this.clampValue(value) - this.min) / (this.max - this.min); 56 }, 57 58 clampValue: function(value) { 59 return Math.min(this.max, Math.max(this.min, this.calcStep(value))); 60 }, 61 62 calcStep: function(value) { 63 return this.step ? (Math.round(value / this.step) / (1 / this.step)) : value; 64 }, 65 66 validateValue: function() { 67 var v = this.clampValue(this.value); 68 this.value = this.oldValue = isNaN(v) ? this.oldValue : v; 69 return this.value !== v; 70 }, 71 72 update: function() { 73 this.validateValue(); 74 this.ratio = this.calcRatio(this.value) * 100; 75 } 76 77 }); 78 79