bind order testing

googlearchive · Oct 10, 2013 · 47a7356 · 47a7356
1 parent 6734bf5
commit 47a7356
Showing 1 changed file with 42 additions and 0 deletions.
diff --git a/sorvell/bind-order/index.html b/sorvell/bind-order/index.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+<!--
+Copyright 2013 The Polymer Authors. All rights reserved.
+Use of this source code is governed by a BSD-style
+license that can be found in the LICENSE file.
+-->
+<html>
+<head>
+  <title>min-max</title>
+  <meta charset="utf-8">
+  <script src="../../../polymer/polymer.js"></script>
+</head>
+<body>
+  <x-test></x-test>
+
+  <polymer-element name="x-test">
+    <template>
+      <div>Data</div>
+      <ul>
+        <li>min: {{min}}</li>
+        <li>max: {{max}}</li>
+        <li>value: {{value}}</li>
+      </ul>
+      <hr><br>
+      <div>Bound to a range input with attribute order: value, min, max</div>
+      <input id="range1" type="range" value="{{value}}" min="{{min}}" max="{{max}}">
+      <div>range value: {{$.range1.value}}</div>
+      <br><hr><br>
+      <div>Bound to a range input with attribute order: min, max, value</div>
+      <input id="range2" type="range" min="{{min}}" max="{{max}}" value="{{value}}">
+      <div>range value: {{$.range2.value}}</div>
+    </template>
+    <script>
+      Polymer('x-test', {
+        min: 200,
+        max: 300,
+        value: 250
+      });
+    </script>
+  </polymer-element>
+  </body>
+</html>