<!-- @license Copyright (c) 2015 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 --> <!doctype html> <html> <head> <title>iron-range-behavior demo</title> <script src="../../webcomponentsjs/webcomponents-lite.js"></script> <link rel="import" href="../iron-range-behavior.html"> <link rel="import" href="../../iron-input/iron-input.html"> <style> body { font-family: sans-serif; } </style> </head> <body unresolved> <dom-module id="x-progressbar"> <style> :host { display: block; height: 40px; background-color: #555; border-radius: 4px; padding: 8px; box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5); } .progress { background-color: #999; height: 100%; border-radius: 4px; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5); } .progress-value { padding: 0 8px; font-size: 18px; color: #fff; } </style> <template> <div class="progress" horizontal center layout style$="{{_computeStyle(ratio)}}"> <div class="progress-value"><span>{{ratio}}</span>%</div> </div> </template> </dom-module> <script> HTMLImports.whenReady(function() { Polymer({ is: 'x-progressbar', behaviors: [Polymer.IronRangeBehavior], _computeStyle: function(ratio) { return 'width: ' + ratio + '%;'; } }); }); </script> <x-progressbar min="0" max="200" value="120"></x-progressbar> </body> </html>