I have a slider, the position or the value of the slider is saved in a variable. But now I would like it to work the other way round, so that when the value of the variable changes, the position and the value of the slider should change dynamically.
The variable tempinput should be updated by a websocket event. If something changes in the parameter.
Would it be possible to build an EventListener for the slider in the event "receive.message" from the socket event (incoming message), to update the slider value and position?
Code:
<h2>Temperature Controll</h2>
<div class="slidecontainer">
<input autocomplete="off" type="range" min="0" max="500" value="0" class="slider" id="temp_input">
<p>Temp_Value: <span id="temp_output"></span></p>
</div>
<script>
var slider = document.getElementById("temp_input");
var output = document.getElementById("temp_output");
output.innerHTML = slider.value;
slider.oninput = function()
{
output.innerHTML = this.value;
//tempinput = slider;
}
slider.addEventListener("input", function(e)
{
tempinput = slider.value;
});
</script>
The variable tempinput should be updated by a websocket event. If something changes in the parameter.
Would it be possible to build an EventListener for the slider in the event "receive.message" from the socket event (incoming message), to update the slider value and position?
Code:
// Set_Temp1 | Slide value comes back from thread2 | set_temp1: tempinput
if ( data_array[0] [0] === 'sensor_address' )
{
let tempinput = data_array[1] [1];
}