Fully kiosk volume slider

Community Projects
9

Per your question about how to style content in custom tiles to fit different sized devices… and my response around the complexity of styling standard HTML range inputs especially when vertical and dynamic scaling is desired… and how using an external range/slider library can sometimes simplify this, here’s an updated copy of your custom tile using the popular noUiSlider library:

<!-- Do not edit below -->
<script type="application/json" id="tile-settings">
{"schema": "0.1.0", "settings": [], "dimensions": {"height": 3, "width": 1}}
</script>
<!-- Do not edit above -->

<link href="https://unpkg.com/nouislider@15.5.1/dist/nouislider.css" rel="stylesheet">
<script src="https://unpkg.com/nouislider@15.5.1/dist/nouislider.min.js"></script>

<style>
  html, body {
    height: 100vh;
    margin: 0;
  }
  .slide-container {
    display: flex;
  }
  #range {
    height: 76vh;
    margin: 2vh 0;
    /* center it */
    margin-left: auto;
    margin-right: auto;
    padding: 2vh 2vw;
  }
  .label { 
    text-align: center;
    font-size: min(10vh, 20vw);
    line-height: 1;
    height: 20vh;
    display: flex;
    align-items: center; /* vertical center */
    justify-content: center; /* horizontal center */
  }
  .label > * {
    margin: 2vh 2vw;
  }
</style>

<div class="slidecontainer">
  <div id="range"></div>

  <div class="label">
    <span>
      Volume: <span id="volume"></span>
    </span>
  </div>
</div>

<script>
let slider = document.getElementById("range");
let output = document.getElementById("volume");
let BASE_URL = "http://IP ADDRESS/?cmd=setAudioVolume&level="
let PARAMS = "&stream=3&password=XXX"

//create the slider
noUiSlider.create(slider, {
  start: [50],
  connect: true,
  range: {
    'min': 0,
    'max': 100
  },
  step: 10,
  orientation: 'vertical',
  direction: 'rtl', //0 at bottom
  // Show a scale with the slider
  pips: {
    mode: 'steps',
    stepped: true,
    density: 1
  }
});

//anytime the value updates while dragging, update the label
range.noUiSlider.on('update', function (values, handle) {
  let value = parseInt(values[handle]); //store the value in a simplified variable name
  output.innerHTML = value; //update the label
});

//only make the API call when the value is actually changed (drag handle released)
range.noUiSlider.on('change', function(values, handle) {
  let value = parseInt(values[handle]); 
  let url = BASE_URL + value + PARAMS //craft the URL
  //make the API call by popping up the window
  var popupwin = window.open(url,'Volume','width=15,height=15,left=5,top=3');
  setTimeout(function() { popupwin.close();}, 1000);
})

//get the initial value to display
output.innerHTML = parseInt(slider.noUiSlider.get());

</script>


</div>

9w3e7Zc2xc

2 Likes