From c3a5d63e11e85d617a131160e8af6baed55fbfb6 Mon Sep 17 00:00:00 2001
From: Humberto Alfonso Díaz <humberto.alfonso@asvito.es>
Date: Mon, 23 Sep 2019 11:32:30 +0200
Subject: FUNCT Add support to modify sliders

---
 src/index.html | 93 ++++++++++++----------------------------------------------
 1 file changed, 18 insertions(+), 75 deletions(-)

(limited to 'src/index.html')

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">
 
-- 
cgit 1.2.3-korg