如何在更改文本输入时更新html5范围？

Question

我有一个html5范围输入和一个文本框输入.当范围更改时,文本框将更新.但是我该怎么办呢,当我在文本框中输入数字时,范围输入会更新？

这是我目前的代码:

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

当我编辑文本框时,我的滑块(范围输入)不会改变.我究竟做错了什么？是不是我不应该使用slider.value来更新滑块？如果这就是原因,那么这样做的正确方法是什么？

Answer 1

嘿所有人那些不知道的人,我们不需要任何js或jquery

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

这个小提琴的工作原理：

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

（实际上，这就是您当前的代码。您导入了 jQuery 库吗？）
请记住，您已将滑块的范围设置为 200。尝试使用 0 到 200 之间的一些值。