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 range input gets updated?

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? Can it be that I shouldn't be using slider.value to update the slider? If that is the reason, what is the correct way to do that?

Answer 1

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>