third_party/polymer/components-chromium/core-range/demo.html

   1 <!doctype html>
   2 <html>
   3   <head>
   4     <title>core-range</title>
   5
   6     <script src="../platform/platform.js"></script>
   7
   8     <link rel="import" href="core-range.html">
   9
  10     <style>
  11
  12
  13     </style>
  14
  15   </head>
  16
  17   <body unresolved>
  18
  19     <polymer-element name="x-test" noscript attributes="value">
  20
  21       <template>
  22
  23         <style>
  24
  25           :host {
  26             display: inline-block;
  27             height: 25px;
  28             width: 300px;
  29             background-color: #ddd;
  30           }
  31
  32           .progress {
  33             background-color: red;
  34             height: 100%;
  35             padding: 5px 0;
  36             box-sizing: border-box;
  37             -moz-box-sizing: border-box;
  38           }
  39
  40         </style>
  41
  42         <core-range min="0" max="200" value="{{value}}" ratio="{{ratio}}"></core-range>
  43
  44         <div class="progress" style="width: {{ratio}}%;">{{ratio}}%</div><br>
  45
  46         value (0 - 200): <input value="{{value}}">
  47
  48       </template>
  49
  50     </polymer-element>
  51
  52     <x-test value="100"></x-test>
  53
  54   </body>
  55 </html>