<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}}">Bri</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">PWM-Value</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); } </script> </div>