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