range slider automatically moving

[s_avinash_s]

Hi 

I have  a range slider which changes when we move the slider or when we enter the value as shown in below example.

https://www.w3schools.com/code/tryit.asp?filename=FVXOWJ0Q97E0

But what am trying is, Instead of entering the value manually i need to get it from server .

Based on the value received from server , slider should automatically move from one place to other.

I just tried like below.but it does not work.

I am not getting how to do this

<form>
  <div>
    <input id="currentoutput1" type="range" min="4" max="20"  step="0.01" oninput="recieved_current_output_1.value=currentoutput1.value" >
    
    
    <input id="recieved_current_output_1" type="number" value="10" min="4" max="20"
    
    
    oninput="rangeInput.value=recieved_current_output_1.value" >
  </div>
</form>


<p class = "modify" id="current_output_val_1"></p>
    
    <script>
var recieved_current_output_1;
function current_output_1() {

    var xhttp = new XMLHttpRequest();
      xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            
            document.getElementById("current_output_val_1").innerHTML = this.responseText;
            recieved_current_output_1= document.getElementById("current_output_val_1").innerHTML;            
        }
      };
    xhttp.open("GET", "current_output_1.txt", true);
    xhttp.send();
    }
    
setInterval(current_output_1,1000);
</script>

Please suggest

Edited October 5, 2018 by s_avinash_s

[Ingolme]

Access the currentoutput1 element and set its value property to whichever number you want.

document.getElementById("currentoutput1").value = ...

 

[dsonesuk]

Each of those inputs update each other by the opposites input id ref, by dot notation

first

currentoutput1.

second

recieved_current_output_1.

YOU are using for the second

rangeInput.

Which means you are referring to a id that does not exist! So change it to 'currentoutput1'

redefining

var recieved_current_output_1;

will cancel out the dot notation to id ref 'recieved_current_output_1' to retrieve a value, so remove it!

You don't require to refer to input using document.getElementById('...') as suggested.

just add '.value' to dot notation id ref

recieved_current_output_1.value== document.getElementById("current_output_val_1").innerHTML; 

Then add

currentoutput1.value=recieved_current_output_1.value

 

Edited October 5, 2018 by dsonesuk

[s_avinash_s]

Hi

Thanks for the reply.

Now i can able to move the slider.

I need all in single line but slider is going to next line.

I tried below code but its not working

<style>
.slide
{
display: inline-block;
}

</style>
<br><br>
<strong><font size="5">Current O/P 1:&emsp;&emsp;&emsp;</strong></font>
<form>
  <div class = slide>
    4 mA<input id="currentoutput1" type="range" min="4" max="20"  step="0.01" oninput="recieved_current_output_1.value=currentoutput1.value" >20 mA       
    <input id="recieved_current_output_1"   min="4" max="20" oninput="currentoutput1.value=recieved_current_output_1.value" >
  </div>
</form>

Please suggest

[dsonesuk]

The form element is a block element, meaning by default it occupies all the space available to it, forcing sibling elements to a new line. It would be better to enter the strong element and its content text above the input.

Also, no one uses a font element anymore, and it should be <strong><font>.....</font></strong>, like a box container within a box container, the inner cannot escape the outer, with the wrong deprecated font element being something like span or remove completely and use CSS font-size: on strong element itself.