How to update html5 range on change of a text input?

Question

I have a html5 range input and a text box input. When the range changes, the text box will get updated. But what should I do so that when I put a number in the text box, the ran

Answer 1

in my side I did it in just Javascript and adding a onchange event.

I also added the value=0 to range so that make it start at the beguining.

<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 side

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

Answer 2

It's actually quite easy. It's all written in 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 3

It's 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 submit the value to the "onchange")

Answer 4

Hey Everyone Those who don't know , we don't need any js or jquery for this

<form>
  <div>
    <input id="rangeInput" type="range" min="0" max="200" oninput="amount.value=rangeInput.value" />
    <input id="amount" type="number" value="100" min="0" max="200" oninput="rangeInput.value=amount.value" />
  </div>
</form>

Answer 5

This fiddle works:

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

(So that's your current code, actually. Did you import the jQuery library?)
Keep in mind that you've set the slider's range to 200. Try some values between 0 and 200.

Answer 6

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

Might work.