diff options
| author |   Humberto Alfonso Díaz <humberto.alfonso@asvito.es> | 2019-09-23 11:32:30 +0200 |
|---|---|---|
| committer |   Lorenzo Tilve <ltilve@igalia.com> | 2020-02-04 09:42:15 +0100 |
| commit | 783be0ef4f7302ca722ab3224f2c9a98e355b8da (patch) | |
| tree | 3885f63801f453638f868c4b76ff0fc5d6a6c8e3 /src/index.html | |
| parent | 202c99424446aaf2145932f02dca00209e7a6888 (diff) | |
FUNCT Add support to modify sliders
Diffstat (limited to 'src/index.html')
| -rw-r--r-- | src/index.html | 93 |
1 files changed, 18 insertions, 75 deletions
diff --git a/src/index.html b/src/index.html index 9c1ac9b..6b2ed01 100644 --- a/src/index.html +++ b/src/index.html @@ -25,81 +25,24 @@ <h1 class="header"> Mixer </h1> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> - <div class="entry"> - <div class="label"> - Volume 1: <span class="value"> 50%</span> - </div> - <a href="#" class="button"> - <span class="icon-volume-decrease"></span> - </a> - <div class="slider"> - <input type="range" min="1" value="1" max="100"> - <progress value="50" max="100"></progress> - </div> - <a href="#" class="button"> - <span class="icon-volume-increase"></span> - </a> - </div> + <div id="SliderContainer"></div> + <script id="slider-template" type="x-tmpl-mustache"> + <div class="entry" id="slider-{{id}}" slider-id="{{ id }}" value="{{ value }}"> + <div class="label"> + {{ name }}: <span class="value"> {{ value }}%</span> + </div> + <a href="#" class="button" onclick="window.decrease(this);"> + <span class="icon-volume-decrease"></span> + </a> + <div class="slider"> + <input type="range" min="1" value="{{ value }}" max="100" oninput="window.change(this);"> + <progress value="{{ value }}" max="100"></progress> + </div> + <a href="#" class="button" onclick="window.increase(this);"> + <span class="icon-volume-increase"></span> + </a> + </div> + </script> </div> <div class="log" id="log"> |