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

这是一个简单的脚本，只需这样做：

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

（当然，只有当您按Enter键并将值提交给“onchange”时才会有效）

Answer 3

This fiddle works：

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

（实际上，这是你当前的代码。你导入了jQuery库吗？）
请记住，您已将滑块的范围设置为200.请尝试介于0和200之间的某些值。

Answer 4

实际上很容易。全部用jQuery Tools API documentation写成。所以我把我的代码更改为了这个并且它有效：

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

在我的身边，我只是在Javascript中添加了一个onchange事件。

我还将value = 0添加到范围中，以便让它从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;
}

如果你想让它在双方都有用，那就加上这个

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

Answer 6

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

可能会工作。

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

6 个答案: