<h4>Light {{LIGHT_NUMBER}}</h4> <div class="pure-control-group"> <label for="power"> <strong>Power</strong> </label> <a id="on{{LIGHT_NUMBER_DEC}}_on" class="pure-button" href="#">ON</a> <a id="on{{LIGHT_NUMBER_DEC}}_off" class="pure-button" href="#">OFF</a> </div> <div class="pure-control-group"> <label for="bri{{LIGHT_NUMBER_DEC}}">Target brightness</label> <input id="bri{{LIGHT_NUMBER_DEC}}" onchange="sendSliderValue({{LIGHT_NUMBER}})" name="bri{{LIGHT_NUMBER_DEC}}" type="range" min="0" max="255" value="25"> <span id="bri{{LIGHT_NUMBER_DEC}}_val" name="bri{{LIGHT_NUMBER_DEC}}">9</span> % <br> <label for="light{{LIGHT_NUMBER_DEC}}_pwm">Actual Bri.</label> <input type="range" min="0" max="100" value="0" id="light{{LIGHT_NUMBER_DEC}}_pwm" disabled> <span id="light{{LIGHT_NUMBER_DEC}}_pwm_txt"></span> % <script> var slider{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}"); var output{{LIGHT_NUMBER_DEC}} = document.getElementById("bri{{LIGHT_NUMBER_DEC}}_val"); output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((slider{{LIGHT_NUMBER_DEC}}.value * 100.0 / 255.0) * 100) / 100).toFixed(2); slider{{LIGHT_NUMBER_DEC}}.oninput = function() { output{{LIGHT_NUMBER_DEC}}.innerHTML = (Math.round((this.value * 100.0 / 255.0) * 100) / 100).toFixed(2); } var lightNumber = {{LIGHT_NUMBER}}; var slider = document.getElementById("bri{{LIGHT_NUMBER_DEC}}"); var pwm = document.getElementById("light{{LIGHT_NUMBER_DEC}}_pwm"); if (lightNumber === 1) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(31, 119, 180) + ", white)"; pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(31, 119, 180) + ")"; } else if (lightNumber === 2) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(255, 127, 14) + ", white)"; pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(255, 127, 14) + ")"; } else if (lightNumber === 3) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(44, 160, 44) + ", white)"; pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(44, 160, 44) + ")"; } else if (lightNumber === 4) { slider.style.background = "linear-gradient(to bottom, " + rgb2Hex(214, 39, 40) + ", white)"; pwm.style.background = "linear-gradient(to right, white, " + rgb2Hex(214, 39, 40) + ")"; } </script> </div>