Polymer elements added to third_party/polymer.

third_party/polymer/components/core-range/core-range.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>