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

   1 <!--
   2     @license
   3     Copyright (c) 2014 The Polymer Project Authors. All rights reserved.
   4     This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
   5     The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
   6     The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
   7     Code distributed by Google as part of the polymer project is also
   8     subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
   9 -->
  10 <!doctype html>
  11 <html>
  12   <head>
  13     <title>core-range</title>
  14
  15     <script src="../webcomponentsjs/webcomponents.js"></script>
  16
  17     <link rel="import" href="core-range.html">
  18     <link rel="import" href="../core-input/core-input.html">
  19
  20     <style>
  21
  22       body {
  23         font-family: sans-serif;
  24       }
  25
  26     </style>
  27   </head>
  28
  29   <body unresolved>
  30
  31     <polymer-element name="x-progressbar" noscript attributes="value min max">
  32
  33       <template>
  34
  35         <style>
  36
  37           :host {
  38             display: block;
  39             height: 40px;
  40             background-color: #555;
  41             border-radius: 4px;
  42             padding: 8px;
  43             box-shadow: inset 0px 2px 5px rgba(0, 0, 0, 0.5);
  44           }
  45
  46           .progress {
  47             background-color: #999;
  48             height: 100%;
  49             border-radius: 4px;
  50             box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.5);
  51           }
  52
  53           .progress-value {
  54             padding: 0 8px;
  55             font-size: 18px;
  56             color: #fff;
  57           }
  58
  59         </style>
  60
  61         <core-range min="{{min}}" max="{{max}}" value="{{value}}" ratio="{{ratio}}"></core-range>
  62
  63         <div class="progress" horizontal center layout _style="width: {{ratio}}%;">
  64           <div class="progress-value">{{ratio}}%</div>
  65         </div>
  66
  67       </template>
  68
  69     </polymer-element>
  70
  71     <x-progressbar min="0" max="200" value="120"></x-progressbar>
  72
  73   </body>
  74 </html>