• Guest, before posting your code please take these rules into consideration:
    • It is required to use our BBCode feature to display your code. While within the editor click < / > or >_ and place your code within the BB Code prompt. This helps others with finding a solution by making it easier to read and easier to copy.
    • Don't share a wall of code. All we want is the problem area, the code related to your issue.


    To learn more about how to use our BBCode feature, please click here.

    Thank you, Code Forum.

JavaScript How to update slider position via dynamic variable

Sigma

Coder
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.

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

    }
 
Solution
document.getElementById("temp_input").value = 475;
will control the slider. If done before assigning the output variable then the 'Temp_Value' will display the setting.
To do this from "receive.message" you need to write something that will do that, either polling the websocket event at intervals or using push notifications to trigger the event.

OldMan

King Coder
document.getElementById("temp_input").value = 475;
will control the slider. If done before assigning the output variable then the 'Temp_Value' will display the setting.
To do this from "receive.message" you need to write something that will do that, either polling the websocket event at intervals or using push notifications to trigger the event.
 
Solution

Antero360

King Coder
Staff Team
Security Analyst
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.

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

    }
Hi there, you shouldn't need a websocket for this. Using an eventlistener to capture whenever the slider changes will work just nicely
 

Sigma

Coder
Ah thanks for the hint, at least I managed to update the tempinput variable via the socket event.

However, the slider position is not updated. How could I do that concretely?


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];
      output.innerHTML = tempinput;
    }
 

Sigma

Coder
Hi there, you shouldn't need a websocket for this. Using an eventlistener to capture whenever the slider changes will work just nicely
Hi, a websocket is already in use.:)

Ok, please look at my last past, i have managed to update the variable through the websocket event but the slider does not change its position?
 

Antero360

King Coder
Staff Team
Security Analyst
Ah thanks for the hint, at least I managed to update the tempinput variable via the socket event.

However, the slider position is not updated. How could I do that concretely?


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];
      output.innerHTML = tempinput;
    }
Ok, so let me ask, why did you need the socket event in the first place? Are you trying to control the value of the slider externally? Trying to understand why the websocket was used in the first place in order to give you a better answer.
 

Sigma

Coder
Ok, so let me ask, why did you need the socket event in the first place? Are you trying to control the value of the slider externally? Trying to understand why the websocket was used in the first place in order to give you a better answer.
You are welcome to ask. It is an I/O (PLC) control APP that I am writing, with a python websocket backend.

In the backend, the value is written to a sqlight database, which then runs various routines that control the heating regulation, for example.

I want to be able to view and control the page from several clients. This makes everything a bit more complicated, because I have to take care of all the websocket routines myself. The ability to control from multiple clients is more of a nice to have than a must have, by the way.
 

Sigma

Coder
Is there also a way to initialise the slider when the page is called up? Or the variable tempinput?

Somehow, when I look at it with two browsers and set a value in one with the slider, the variable is only updated properly when I also move the slider from the other browser. Of course it's event based but still it should happen via the websocket event? At least that's what I thought.
 

Sigma

Coder
document.getElementById("temp_input").value = 475;
will control the slider. If done before assigning the output variable then the 'Temp_Value' will display the setting.
To do this from "receive.message" you need to write something that will do that, either polling the websocket event at intervals or using push notifications to trigger the event.
Brilliant, a thousand thanks, that shifts the regulator. I'll just let it trigger via the wbsocket event, since data comes in periodically anyway.

But one thing still doesn't work, when I reload the page, for example from another browser, the slider doesn't seem to be initialised. Only when I move the slider, the sliders are updated on both browsers or tabs.

So, how could I initialise the slider when loading the page without changing the value of temp_input? And the slider qusi is activated... i don't know how i could formulate this better, but i hope it is understandable what i mean (sry)




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];
      output.innerHTML = tempinput;
      document.getElementById("temp_input").value = tempinput;
    }
 

Sigma

Coder
Brilliant, a thousand thanks, that shifts the regulator. I'll just let it trigger via the wbsocket event, since data comes in periodically anyway.

But one thing still doesn't work, when I reload the page, for example from another browser, the slider doesn't seem to be initialised. Only when I move the slider, the sliders are updated on both browsers or tabs.

So, how could I initialise the slider when loading the page without changing the value of temp_input? And the slider qusi is activated... i don't know how i could formulate this better, but i hope it is understandable what i mean (sry)




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];
      output.innerHTML = tempinput;
      document.getElementById("temp_input").value = tempinput;
    }
Ok, I have solved the problem, I had forgotten to synchronise the states cleanly via websocket.

OldMan is right, in this point :)
 
Top