1<!-- 2@license 3Copyright (c) 2015 The Polymer Project Authors. All rights reserved. 4This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt 5The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt 6The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt 7Code distributed by Google as part of the polymer project is also 8subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt 9--> 10<!doctype html> 11<html> 12 <head> 13 <title>iron-range-behavior demo</title> 14 15 <script src="../../webcomponentsjs/webcomponents-lite.js"></script> 16 17 <link rel="import" href="../iron-range-behavior.html"> 18 <link rel="import" href="../../iron-input/iron-input.html"> 19 20 <style> 21 22 body { 23 font-family: sans-serif; 24 } 25 26 </style> 27 </head> 28 29 <body unresolved> 30 31 <dom-module id="x-progressbar"> 32 <template> 33 <style> 34 :host { 35 display: block; 36 height: 40px; 37 background-color: #555; 38 border-radius: 4px; 39 padding: 8px; 40 box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5); 41 } 42 43 .progress { 44 background-color: #999; 45 height: 100%; 46 border-radius: 4px; 47 box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); 48 } 49 50 .progress-value { 51 padding: 0 8px; 52 font-size: 18px; 53 color: #fff; 54 } 55 </style> 56 57 <div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}"> 58 <div class="progress-value"><span>{{ratio}}</span>%</div> 59 </div> 60 </template> 61 </dom-module> 62 63 <script> 64 HTMLImports.whenReady(function() { 65 Polymer({ 66 is: 'x-progressbar', 67 68 behaviors: [Polymer.IronRangeBehavior], 69 70 _computeStyle: function(ratio) { 71 return 'width: ' + ratio + '%;'; 72 } 73 }); 74 }); 75 </script> 76 77 <x-progressbar min="0" max="200" value="120"></x-progressbar> 78 79 </body> 80</html> 81