src/third_party/polymer/components-chromium/paper-slider/demo.html

   1 <!doctype html>
   2 <html>
   3 <head>
   4   <title>paper-slider</title>
   5
   6   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
   7   <meta name="mobile-web-app-capable" content="yes">
   8   <meta name="apple-mobile-web-app-capable" content="yes">
   9
  10   <script src="../platform/platform.js"></script>
  11
  12   <link rel="import" href="paper-slider.html">
  13   <link rel="import" href="../font-roboto/roboto.html">
  14
  15   <style shim-shadowdom>
  16
  17     body {
  18       font-family: RobotoDraft, 'Helvetica Neue', Helvetica, Arial;
  19       margin: 0;
  20       padding: 24px;
  21       -webkit-user-select: none;
  22       -moz-user-select: none;
  23       -ms-user-select: none;
  24       user-select: none;
  25       -webkit-tap-highlight-color: rgba(0,0,0,0);
  26       -webkit-touch-callout: none;
  27     }
  28
  29     paper-slider {
  30       width: 100%;
  31     }
  32
  33     section {
  34       max-width: 1000px;
  35       padding: 20px 0;
  36       background-color: #f0f0f0;
  37     }
  38
  39     section > div {
  40       padding: 14px;
  41     }
  42
  43     .yellow-slider paper-slider::shadow #sliderKnobInner,
  44     .yellow-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
  45       background-color: #f4b400;
  46     }
  47
  48     .green-slider paper-slider::shadow #sliderKnobInner,
  49     .green-slider paper-slider::shadow #sliderKnobInner::before,
  50     .green-slider paper-slider::shadow #sliderBar::shadow #activeProgress {
  51       background-color: #0f9d58;
  52     }
  53
  54     #ratingsLabel {
  55       padding-left: 12px;
  56       color: #a0a0a0;
  57     }
  58
  59   </style>
  60
  61 </head>
  62 <body unresolved>
  63
  64   <section class="yellow-slider">
  65
  66     <div>Music, video, games &amp; other media</div>
  67     <paper-slider value="50"></paper-slider>
  68
  69     <br>
  70     <br>
  71
  72     <div>Notifications</div>
  73     <paper-slider value="50"></paper-slider>
  74
  75     <br>
  76     <br>
  77
  78     <div>Alarms</div>
  79     <paper-slider value="80"></paper-slider>
  80
  81   </section>
  82
  83   <br>
  84
  85   <section>
  86
  87     <div center horizontal layout>
  88       <div>R</div>
  89       <paper-slider value="23" max="255" editable></paper-slider>
  90     </div>
  91
  92     <br>
  93     <br>
  94
  95     <div center horizontal layout>
  96       <div>G</div>
  97       <paper-slider value="183" max="255" editable></paper-slider>
  98     </div>
  99
 100     <br>
 101     <br>
 102
 103     <div center horizontal layout>
 104       <div>B</div>
 105       <paper-slider value="211" max="255" editable></paper-slider>
 106     </div>
 107
 108   </section>
 109
 110   <br>
 111
 112   <section class="green-slider">
 113
 114     <div>Brightness</div>
 115     <br>
 116     <paper-slider pin value="50"></paper-slider>
 117
 118   </section>
 119
 120   <br>
 121
 122   <section class="green-slider">
 123
 124     <div>
 125       <span>Ratings</span><span id="ratingsLabel"></span>
 126     </div>
 127     <br>
 128     <paper-slider id="ratings" pin snaps max="10" step="1" value="5"></paper-slider>
 129
 130   </section>
 131
 132   <script>
 133
 134     var ratings = document.querySelector('#ratings');
 135     ratings.addEventListener('change', function() {
 136       document.querySelector('#ratingsLabel').textContent = ratings.value;
 137     });
 138
 139   </script>
 140
 141 </body>
 142 </html>