Skip to content
This repository has been archived by the owner on Mar 13, 2018. It is now read-only.

Commit

Permalink
ws
Browse files Browse the repository at this point in the history
  • Loading branch information
frankiefu committed Apr 11, 2014
1 parent ca78ddb commit dac5dab
Showing 1 changed file with 76 additions and 79 deletions.
155 changes: 76 additions & 79 deletions core-range.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,6 @@
-->

<!--
The `core-range` element is used for managing a numberic value within a given
range. It has no visual appearance and is typically used in conjunciton with
another element.
Expand All @@ -27,85 +26,83 @@
<link rel="import" href="../polymer/polymer.html">

<polymer-element name="core-range" attributes="value min max step ratio">
<script>

<script>

Polymer('core-range', {

/**
* The number that represents the current value.
*
* @attribute value
* @type number
* @default 0
*/
value: 0,

/**
* The number that indicates the minimum value of the range.
*
* @attribute min
* @type number
* @default 0
*/
min: 0,

/**
* The number that indicates the maximum value of the range.
*
* @attribute max
* @type number
* @default 100
*/
max: 100,

/**
* Specifies the value granularity of the range's value.
*
* @attribute step
* @type number
* @default 1
*/
step: 1,

/**
* Returns the ratio of the value.
*
* @attribute ratio
* @type number
* @default 0
*/
ratio: 0,

observe: {
'value min max step': 'update'
},

calcRatio: function(value) {
return (value - this.min) / (this.max - this.min);
},

clampValue: function(value) {
return Math.min(this.max, Math.max(this.min, this.calcStep(value)));
},

calcStep: function(value) {
return this.step ? (Math.round(value / this.step) * this.step) : value;
},

validateValue: function() {
var v = this.clampValue(this.value);
this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
return this.value !== v;
},

update: function() {
this.validateValue();
this.ratio = this.calcRatio(this.value) * 100;
}

});
Polymer('core-range', {

/**
* The number that represents the current value.
*
* @attribute value
* @type number
* @default 0
*/
value: 0,

/**
* The number that indicates the minimum value of the range.
*
* @attribute min
* @type number
* @default 0
*/
min: 0,

/**
* The number that indicates the maximum value of the range.
*
* @attribute max
* @type number
* @default 100
*/
max: 100,

/**
* Specifies the value granularity of the range's value.
*
* @attribute step
* @type number
* @default 1
*/
step: 1,

/**
* Returns the ratio of the value.
*
* @attribute ratio
* @type number
* @default 0
*/
ratio: 0,

observe: {
'value min max step': 'update'
},

calcRatio: function(value) {
return (value - this.min) / (this.max - this.min);
},

clampValue: function(value) {
return Math.min(this.max, Math.max(this.min, this.calcStep(value)));
},

calcStep: function(value) {
return this.step ? (Math.round(value / this.step) * this.step) : value;
},

validateValue: function() {
var v = this.clampValue(this.value);
this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
return this.value !== v;
},

update: function() {
this.validateValue();
this.ratio = this.calcRatio(this.value) * 100;
}

</script>
});

</script>
</polymer-element>

0 comments on commit dac5dab

Please sign in to comment.