aboutsummaryrefslogtreecommitdiffstats
path: root/src/index.html
diff options
context:
space:
mode:
authorHumberto Alfonso Díaz <humberto.alfonso@asvito.es>2019-09-23 11:32:30 +0200
committerLorenzo Tilve <ltilve@igalia.com>2020-02-04 09:42:15 +0100
commit783be0ef4f7302ca722ab3224f2c9a98e355b8da (patch)
tree3885f63801f453638f868c4b76ff0fc5d6a6c8e3 /src/index.html
parent202c99424446aaf2145932f02dca00209e7a6888 (diff)
FUNCT Add support to modify sliders
Diffstat (limited to 'src/index.html')
-rw-r--r--src/index.html93
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">