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

[rzscout]

Hi Sigma,
klar geht das. Ich schreibe dir mal ein Beispiel hier in den Thread:

Code:

'use stric';
var slider, output, tempinput, wbs;
document.addEventListener('DOMContentLoaded', init);
function init() {
    let server = "meineserverdomain.de";
    let port = "4000";
    wbs = new WebSocket('ws://' + server + ':' + port);
    slider = document.getElementById("temp_input");
    output = document.getElementById("temp_output");
    slider.addEventListener('input', () => {
        tempinput = slider.value;
        output.textContent = tempinput;
        wbs.send(tempinput);
    });
    wbs.addEventListener('message', function(event) {
        incomingMessage(event.data);
    });
}
function incomingMessage(myData) {
    tempinput = myData;
    output.textContent = myData;
    slider.value = myData;
}

Ich hoffe der Codeschnipsel den ich schnell mal zusammen gebastelt habe kann dir weiterhelfen. Verwende bevorzugt den nativen EventListener in JavaScript, damit du auf Ergeignisse jeglicher Art verarbeiten kannst.

Viel Erfolg und weitere Fragen da sind, dann einfach in das Forum schreiben.

VG rzscout

[Sigma]

Hi rzscout,  vielen Dank! Habe deinen Post erst jetzt gesehen. Ich habe schon eine Lösung gefunden, ich werde mir deinen Code auch noch anschauen und testen in den kommenden Tagen.

VG
Sigma

[rzscout]

Hi Sigma,
danke für deinen Lob. Ich hoffe deine bzw. meine Lösung helfen dir weiter.

VG rzscout