SGH / COMPONENTS

Blame view

bower_components/paper-slider/demo/index.html 4.09 KB
Edit Raw Normal View History
73bcce88   luigser   COMPONENTS 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
 
  <!--
  @license
  Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
  This code may only be used under the BSD style license found at http://polymer.github.io/LICENSE.txt
  The complete set of authors may be found at http://polymer.github.io/AUTHORS.txt
  The complete set of contributors may be found at http://polymer.github.io/CONTRIBUTORS.txt
  Code distributed by Google as part of the polymer project is also
  subject to an additional IP rights grant found at http://polymer.github.io/PATENTS.txt
  -->
  <!doctype html>
  <html>
  <head>
    <title>paper-slider demo</title>
  
    <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-capable" content="yes">
a1a3bc73   Luigi Serra   graphs updates 
19
 
    <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
73bcce88   luigser   COMPONENTS 
20
 
    <link rel="import" href="../../paper-styles/demo-pages.html">
a1a3bc73   Luigi Serra   graphs updates 
21
 
    <link rel="import" href="../../paper-styles/color.html">
73bcce88   luigser   COMPONENTS 
22
23
24
25
26
27
 
    <link rel="import" href="../paper-slider.html">
  
    <style is="custom-style">
      body {
        padding: 40px;
      }
a1a3bc73   Luigi Serra   graphs updates 
28
73bcce88   luigser   COMPONENTS 
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
 
      paper-slider {
        width: 100%;
      }
  
      paper-slider.blue {
        --paper-slider-knob-color: var(--paper-light-blue-500);
        --paper-slider-active-color: var(--paper-light-blue-500);
      }
  
      paper-slider.red {
        --paper-slider-knob-color: var(--paper-red-500);
        --paper-slider-active-color: var(--paper-red-500);
      }
  
      paper-slider.green {
        --paper-slider-knob-color: var(--paper-green-500);
        --paper-slider-active-color: var(--paper-green-500);
      }
  
      paper-slider.orange {
        --paper-slider-knob-color: var(--paper-orange-500);
        --paper-slider-active-color: var(--paper-orange-500);
        --paper-slider-pin-color: var(--paper-orange-500);
      }
eb240478   Luigi Serra   public room cards... 
54
 
      .caption {
73bcce88   luigser   COMPONENTS 
55
56
57
58
 
        padding-left: 12px;
        color: #a0a0a0;
      }
eb240478   Luigi Serra   public room cards... 
59
60
61
62
 
      #grade {
        --paper-slider-secondary-color: var(--paper-red-a200);
      }
73bcce88   luigser   COMPONENTS 
63
64
65
66
 
    </style>
  
  </head>
  <body unresolved>
a1a3bc73   Luigi Serra   graphs updates 
67
 
    <div class="vertical-section-container">
73bcce88   luigser   COMPONENTS 
68
69
70
71
72
73
74
75
76
 
      <h4>Default</h4>
      <div class="vertical-section">
        <div>Oxygen</div>
        <paper-slider value="21" id="test"></paper-slider><br><br>
        <div>Argon</div>
        <paper-slider value="1"></paper-slider><br><br>
        <div>Hydrogen</div>
        <paper-slider value="0"></paper-slider><br><br>
        <div>Nitrogen</div>
eb240478   Luigi Serra   public room cards... 
77
 
        <paper-slider value="78" secondary-progress="85"></paper-slider><br><br>
73bcce88   luigser   COMPONENTS 
78
 
        <div>Sprinkles</div>
a1a3bc73   Luigi Serra   graphs updates 
79
 
        <paper-slider disabled value="33"></paper-slider>
73bcce88   luigser   COMPONENTS 
80
81
82
83
 
      </div>
  
      <h4>Editable</h4>
      <div class="vertical-section">
a1a3bc73   Luigi Serra   graphs updates 
84
 
        <div>
73bcce88   luigser   COMPONENTS 
85
86
87
 
          <div>R</div>
          <paper-slider class="red" value="23" max="255" editable></paper-slider>
        </div>
a1a3bc73   Luigi Serra   graphs updates 
88
 
        <div>
73bcce88   luigser   COMPONENTS 
89
90
91
 
          <div>G</div>
          <paper-slider class="green" value="183" max="255" editable></paper-slider>
        </div>
a1a3bc73   Luigi Serra   graphs updates 
92
 
        <div>
73bcce88   luigser   COMPONENTS 
93
94
95
 
          <div>B</div>
          <paper-slider class="blue" value="211" max="255" editable></paper-slider>
        </div>
a1a3bc73   Luigi Serra   graphs updates 
96
 
        <div>
73bcce88   luigser   COMPONENTS 
97
98
99
100
101
102
103
104
105
 
        <div>&alpha;</div>
        <paper-slider max="1.0" step="0.01" editable></paper-slider>
        </div>
      </div>
  
      <h4>Labelled pins</h4>
      <div class="vertical-section">
        <div>Brightness</div><br>
        <paper-slider pin value="20" class="orange"></paper-slider>
eb240478   Luigi Serra   public room cards... 
106
 
        <div>Ratings: <span id="ratingsLabel" class="caption"></span></div><br>
a1a3bc73   Luigi Serra   graphs updates 
107
 
        <paper-slider id="ratings" pin snaps max="10" max-markers="10" step="1" value="5" class="orange"></paper-slider>
eb240478   Luigi Serra   public room cards... 
108
109
 
        <div>Grade: <span id="gradeLabel" class="caption"></span></div><br>
        <paper-slider id="grade" pin value="20" secondary-progress="70" class="blue"></paper-slider>
73bcce88   luigser   COMPONENTS 
110
111
112
113
114
115
116
117
118
119
 
      </div>
    </div>
  
    <script>
  
      var ratings = document.querySelector('#ratings');
      ratings.addEventListener('value-change', function() {
        document.querySelector('#ratingsLabel').textContent = ratings.value;
      });
eb240478   Luigi Serra   public room cards... 
120
121
122
123
124
125
 
      var grade = document.querySelector('#grade');
      grade.addEventListener('value-change', function() {
        var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
        document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
      });
73bcce88   luigser   COMPONENTS 
126
127
128
129
 
    </script>
  
  </body>
  </html>