← Back to branch summary

~didrocks/+junk/face-detection-15.04

« back to all changes in this revision

Viewing changes to facedetection/www/bower_components/paper-slider/demo/index.html

  • Committer: Didier Roche
  • Date: 2016-05-10 23:09:11 UTC
  • Revision ID: didier.roche@canonical.com-20160510230911-c7xr490zrj3yrzxd
New version

Show diffs side-by-side

added added

removed removed

Lines of Context:
facedetection/www/bower_components/paper-slider/demo/index.html
 
1
<!--
 
2
@license
 
3
Copyright (c) 2015 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>paper-slider demo</title>
 
14
 
 
15
  <meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1, user-scalable=yes">
 
16
  <meta name="mobile-web-app-capable" content="yes">
 
17
  <meta name="apple-mobile-web-app-capable" content="yes">
 
18
 
 
19
  <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
 
20
  <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
 
21
  <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
 
22
  <link rel="import" href="../../paper-styles/color.html">
 
23
  <link rel="import" href="../paper-slider.html">
 
24
 
 
25
  <style is="custom-style" include="demo-pages-shared-styles">
 
26
    paper-slider {
 
27
      width: 100%;
 
28
    }
 
29
  </style>
 
30
</head>
 
31
<body unresolved>
 
32
  <div class="vertical-section-container centered">
 
33
    <h3>paper-sliders can have values, secondary progress values, or be disabled.</h3>
 
34
    <demo-snippet>
 
35
      <template>
 
36
        <paper-slider value="21"></paper-slider>
 
37
        <paper-slider value="0"></paper-slider>
 
38
        <paper-slider value="50" secondary-progress="85"></paper-slider>
 
39
        <paper-slider disabled value="33"></paper-slider>
 
40
      </template>
 
41
    </demo-snippet>
 
42
 
 
43
    <h3>They can be editable, and styled using custom properties</h3>
 
44
    <demo-snippet>
 
45
      <template>
 
46
        <style is="custom-style">
 
47
          paper-slider.red {
 
48
            --paper-slider-knob-color: var(--paper-red-500);
 
49
            --paper-slider-active-color: var(--paper-red-500);
 
50
          }
 
51
          paper-slider.green {
 
52
            --paper-slider-knob-color: var(--paper-green-500);
 
53
            --paper-slider-active-color: var(--paper-green-500);
 
54
          }
 
55
          paper-slider.blue {
 
56
            --paper-slider-knob-color: var(--paper-light-blue-500);
 
57
            --paper-slider-active-color: var(--paper-light-blue-500);
 
58
          }
 
59
        </style>
 
60
 
 
61
        <div>R</div>
 
62
        <paper-slider class="red" value="23" max="255" editable></paper-slider>
 
63
        <div>G</div>
 
64
        <paper-slider class="green" value="183" max="255" editable></paper-slider>
 
65
        <div>B</div>
 
66
        <paper-slider class="blue" value="211" max="255" editable></paper-slider>
 
67
      </template>
 
68
    </demo-snippet>
 
69
 
 
70
    <h3>The pins can be labelled</h3>
 
71
    <demo-snippet>
 
72
      <template>
 
73
        <style is="custom-style">
 
74
          .caption {
 
75
            padding-left: 12px;
 
76
            color: #a0a0a0;
 
77
          }
 
78
          #grade {
 
79
            --paper-slider-secondary-color: var(--paper-red-a200);
 
80
          }
 
81
        </style>
 
82
        <div>Brightness</div><br>
 
83
        <paper-slider pin value="20"></paper-slider>
 
84
        <div>Ratings: <span id="ratingsLabel" class="caption"></span></div><br>
 
85
        <paper-slider id="ratings" pin snaps max="10" max-markers="10" step="1" value="5"></paper-slider>
 
86
        <div>Grade: <span id="gradeLabel" class="caption"></span></div><br>
 
87
        <paper-slider id="grade" pin value="20" secondary-progress="70"></paper-slider>
 
88
 
 
89
        <script>
 
90
          document.addEventListener('WebComponentsReady', function() {
 
91
            var ratings = document.querySelector('#ratings');
 
92
            ratings.addEventListener('value-change', function() {
 
93
              document.querySelector('#ratingsLabel').textContent = ratings.value;
 
94
            });
 
95
 
 
96
            var grade = document.querySelector('#grade');
 
97
            grade.addEventListener('value-change', function() {
 
98
              var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
 
99
              document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
 
100
            });
 
101
          });
 
102
        </script>
 
103
      </template>
 
104
    </demo-snippet>
 
105
  </div>
 
106
 
 
107
  <script>
 
108
    document.addEventListener('WebComponentsReady', function() {
 
109
      var ratings = document.querySelector('#ratings');
 
110
      ratings.addEventListener('value-change', function() {
 
111
        document.querySelector('#ratingsLabel').textContent = ratings.value;
 
112
      });
 
113
 
 
114
      var grade = document.querySelector('#grade');
 
115
      grade.addEventListener('value-change', function() {
 
116
        var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
 
117
        document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
 
118
      });
 
119
    });
 
120
  </script>
 
121
</body>
 
122
</html>