Slider Position über dynamische Variable update

[Sigma]

Moin,

Ich habe einen Slider, die Position bzw. der Wert des Slider wird in eine Variable gespeichert. Jetzt hätte ich aber gern, dass es auch andersherum funktioniert, dass wenn sich der Wert der Variable ändert, sich ebenfalls die Position und der Wert des Slider verändert, also dynamisch quasi.

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>

Die Variable tempinput sollte durch ein websocket event aktualisieret werden. Falls sich an dem Parameter etwas ändert.

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];

    }

Wäre es möglich bei dem Event receive.message vom Socket, für den slider einen EventListener zu bauen, der den Slider aktualisiert?

Irgendwie verstehe ich nicht, wie ich das am besten angehen soll... da aktuell der EventListener nur auf das manuelle Verschieben des Sliders schaut.

Würde mich über Tipps freuen, Danke im Voraus!


Grüße