1 files changed, 80 insertions, 0 deletions
diff --git a/catapult/third_party/polymer/components/iron-range-behavior/demo/index.html b/catapult/third_party/polymer/components/iron-range-behavior/demo/index.html
new file mode 100644
index 00000000..a0afe84d
--- /dev/null
+++ b/catapult/third_party/polymer/components/iron-range-behavior/demo/index.html
@@ -0,0 +1,80 @@
+<!--
+@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">
+      <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>