Home | History | Annotate | Download | only in paper-slider 
      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>
    143