<!– @license Copyright © 2015 The Polymer Project Authors. All rights reserved. This code may only be used under the BSD style license found at polymer.github.io/LICENSE.txt The complete set of authors may be found at polymer.github.io/AUTHORS.txt The complete set of contributors may be found at 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 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">
    <template>
      <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>

      <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>