Jump to content
s_avinash_s

range slider automatically moving

Recommended Posts

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 by s_avinash_s

Share this post


Link to post
Share on other sites

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

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

 

Share this post


Link to post
Share on other sites

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 by dsonesuk

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

×
×
  • Create New...