Fully kiosk volume slider

Community Projects
7

I declare myself an idiot…

As in my code, all the variables are before the function, they need to be inside.
I got it working!

PS: for anyone searching for this, here’s the code. I’m still working on styling it a bit (aka learning how to). I already made it vertical, it fits better to my needs. From what I read, this also only works in Chrome.

To use, replace IP ADDRESS with your own and XXX with your remote admin password, inside the URL1 and URL2 parts of the code. To handle different audio streams, like bluetooth, calls or alarms, edit the number after “stream” in URL2.

Quick edit so the volume level is shown while moving the slider, so you can tell what volume you will be setting to.

<!DOCTYPE html>
<html>

<body>
<div class="slidecontainer">
  <input type="range" min="0" max="100" step="10" class="slider" id="myRange" list="tickmarks" orient="vertical">
<style>

.slider{
-webkit-appearance: slider-vertical;
width: 8px;
height: 225px;
padding: 0 5px;
position: relative

}

</style>
  <datalist id="tickmarks">
<option value="0"></option>
<option value="10"></option>
<option value="20"></option>
<option value="30"></option>
<option value="40"></option>
<option value="50"></option>
<option value="60"></option>
<option value="70"></option>
<option value="80"></option>
<option value="90"></option>
<option value="100"></option>
</datalist>

  <p>Volume: <span id="demo"></span></p>
</div>

<script>
let slider = document.getElementById("myRange");
let output = document.getElementById("demo");
let URL1 = "http://IP ADDRESS/?cmd=setAudioVolume&level="
let URL2 = "&stream=3&password=XXX"

output.innerHTML = slider.value;

  slider.oninput = function() {
  output.innerHTML = this.value;
}

  slider.onchange = function() {
  output.innerHTML = this.value;
  let URL3 = this.value
  let URL = URL1 + URL3 + URL2
      var popupwin = window.open(URL,'Volume','width=15,height=15,left=5,top=3');
    setTimeout(function() { popupwin.close();}, 1000);
}


</script>

</body>
</html>
3 Likes