index.html 2.04 KB
<!--
@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>