third_party/polymer/components/core-range/core-range.html

   1 <!--
   2 Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   3 This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   4 The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   5 The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   6 Code distributed by Google as part of the polymer project is also
   7 subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   8 -->
   9
  10 <!--
  11 The `core-range` element is used for managing a numeric value within a given
  12 range.  It has no visual appearance and is typically used in conjunction with
  13 another element.
  14
  15 One can build a progress bar using `core-range` like this:
  16
  17     <core-range min="0" max="200" value="100" ratio="{{ratio}}"></core-range>
  18     <div class="progress-bar" style="width: {{ratio}}%;"></div>
  19
  20 @group Polymer Core Elements
  21 @element core-range
  22 @homepage github.io
  23
  24 -->
  25
  26 <link rel="import" href="../polymer/polymer.html">
  27
  28 <polymer-element name="core-range" attributes="value min max step ratio">
  29 <script>
  30
  31   Polymer('core-range', {
  32
  33     /**
  34      * The number that represents the current value.
  35      *
  36      * @attribute value
  37      * @type number
  38      * @default 0
  39      */
  40     value: 0,
  41
  42     /**
  43      * The number that indicates the minimum value of the range.
  44      *
  45      * @attribute min
  46      * @type number
  47      * @default 0
  48      */
  49     min: 0,
  50
  51     /**
  52      * The number that indicates the maximum value of the range.
  53      *
  54      * @attribute max
  55      * @type number
  56      * @default 100
  57      */
  58     max: 100,
  59
  60     /**
  61      * Specifies the value granularity of the range's value.
  62      *
  63      * @attribute step
  64      * @type number
  65      * @default 1
  66      */
  67     step: 1,
  68
  69     /**
  70      * Returns the ratio of the value.
  71      *
  72      * @attribute ratio
  73      * @type number
  74      * @default 0
  75      */
  76     ratio: 0,
  77
  78     observe: {
  79       'value min max step': 'update'
  80     },
  81
  82     calcRatio: function(value) {
  83       return (this.clampValue(value) - this.min) / (this.max - this.min);
  84     },
  85
  86     clampValue: function(value) {
  87       return Math.min(this.max, Math.max(this.min, this.calcStep(value)));
  88     },
  89
  90     calcStep: function(value) {
  91       return this.step ? (Math.round(value / this.step) / (1 / this.step)) : value;
  92     },
  93
  94     validateValue: function() {
  95       var v = this.clampValue(this.value);
  96       this.value = this.oldValue = isNaN(v) ? this.oldValue : v;
  97       return this.value !== v;
  98     },
  99
 100     update: function() {
 101       this.validateValue();
 102       this.ratio = this.calcRatio(this.value) * 100;
 103     }
 104
 105   });
 106
 107 </script>
 108 </polymer-element>