109 lines
2.6 KiB
HTML
109 lines
2.6 KiB
HTML
<!--
|
|
Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
|
|
This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
|
|
The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
|
|
The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
|
|
Code distributed by Google as part of the polymer project is also
|
|
subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
|
|
-->
|
|
|
|
<!--
|
|
The `core-range` element is used for managing a numeric value within a given
|
|
range. It has no visual appearance and is typically used in conjunction with
|
|
another element.
|
|
|
|
One can build a progress bar using `core-range` like this:
|
|
|
|
<core-range min="0" max="200" value="100" ratio="{{ratio}}"></core-range>
|
|
<div class="progress-bar" style="width: {{ratio}}%;"></div>
|
|
|
|
@group Polymer Core Elements
|
|
@element core-range
|
|
@homepage github.io
|
|
|
|
-->
|
|
|
|
<link rel="import" href="../polymer/polymer.html">
|
|
|
|
<polymer-element name="core-range" attributes="value min max step ratio">
|
|
<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 (this.clampValue(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) / (1 / 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>
|
|
</polymer-element>
|