如何在更改文本输入时更新html5范围？ [英] How to update html5 range on change of a text input?

问题描述

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

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?

这是我当前的代码：

<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来更新滑块？如果这就是原因，那么这样做的正确方法是什么？

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?

推荐答案

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

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>

这篇关于如何在更改文本输入时更新html5范围？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！