How to update html5 range when changing text input?

Question

I have html5 range input and text field input. When the range changes, the text box will be updated. But what should I do to enter a range when I enter a number in a text box?

This is my current code:

<div> <input id="slider" type="range" min="0" max="200" /> <input id="box" type="text" value="0"/> </div> <script> var slider = document.getElementById('slider'); $('#box').change(function(){slider.value=parseInt(this.value)}); </script> 

When I edit my text box, my slider (range input) DOES NOT change. What am I doing wrong? Maybe I should not use slider.value to update the slider? If this is the reason, what is the right way to do this?

Answer 1

Hello everyone. Those who don’t know, we don’t need js or jquery for this.

 <form> <div> <input for="amount" oninput="amount.value=rangeInput.value" id="slider" type="range" min="0" max="200" name="rangeInput" /> <input oninput="rangeInput.value=amount.value" id="box" type="text" value="0" name="amount" for="rangeInput" oninput="rangeInput.value=amount.value" /> </div> </form> 

Answer 2

This is a simple script, just do this:

 <label for=range1>Slide, then press "Click to search slider value"</label> <span>-1000 </span><input type="range" id="slide1" min="-1000" max="1000" value=0 step=0.25 onchange="printValue('slide1', 'rangeValue1')"><span> 1000 </span> <i><input type=text id="rangeValue1" value=0 width=25% onchange="slideValue('slide1', 'rangeValue1');"><span> is the value of the slider now</span></i><br/><br/> <script> function printValue(sliderID, spanbox) { var x = document.getElementById(spanbox); var y = document.getElementById(sliderID); x.value = y.value; } function slideValue(sliderID, spanbox){ var x = document.getElementById(spanbox); var y = document.getElementById(sliderID); y.value = parseInt(x.value); } window.onload = function() { printValue('slide1', 'rangeValue1'); } </script> 

(Of course, this only works when you press enter and send the value to "onchange")

Answer 3

in my side, I only did this in Javascript and added an onchange event.

I also added value = 0 to the range so that it starts from the beginning.

 <div> <input id="slider" type="range" min="0" max="200" value="0"/> <input id="box" type="text" value="0"/> </div> 

 var slider = document.getElementById('slider'); var box = document.getElementById("box"); slider.onchange = function(){ box.value = slider.value; } 

And add this if you want to make it work on both sides

 box.onkeyup = function(){ slider.value = box.value; } ​ 

Answer 4

This fiddle works :

 var slider = document.getElementById('slider'); $('#box').change(function(){ slider.value=parseInt(this.value); }); 

(So ​​your current code, actually. Have you imported the jQuery library?)
Keep in mind that you set the range of the sliders to 200. Try a few values ​​from 0 to 200.

Answer 5

This is actually quite simple. All this is written in the jQuery Tools API documentation . So I changed my code to this, and it worked:

 <div> <input id="slider" type="range" min="0" max="200" /> <input id="box" type="text" value="0"/> </div> <script> var sliderapi = $("#slider").data("rangeinput"); $('#box').change(function(){sliderapi.setValue(parseInt(this.value))}); </script> 

Answer 6

 $('#box').change(function(){ $('#slider').attr({"value":parseInt(this.value)}); }); 

Can work.