s_avinash_s Posted October 5, 2018 Share Posted October 5, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
Ingolme Posted October 5, 2018 Share Posted October 5, 2018 Access the currentoutput1 element and set its value property to whichever number you want. document.getElementById("currentoutput1").value = ... Link to comment Share on other sites More sharing options...
dsonesuk Posted October 5, 2018 Share Posted October 5, 2018 (edited) 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 Link to comment Share on other sites More sharing options...
s_avinash_s Posted October 7, 2018 Author Share Posted October 7, 2018 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:   </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 Link to comment Share on other sites More sharing options...
dsonesuk Posted October 7, 2018 Share Posted October 7, 2018 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. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now