Javascript 如何在更改文本输入时更新 html5 范围？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13475016/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to update html5 range on change of a text input?
提问by Zening Qu
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?
我有一个 html5 范围输入和一个文本框输入。当范围更改时，文本框将更新。但是我应该怎么做才能在文本框中输入数字时，范围输入会更新？
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?
当我编辑我的文本框时，我的滑块（范围输入）不会改变。我究竟做错了什么？难道我不应该使用slider.value 来更新滑块？如果这是原因，那么正确的方法是什么？
回答by suraj rawat
Hey Everyone Those who don't know , we don't need any js or jquery for this
嘿大家 不知道的人，我们不需要任何 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>回答by user2425429
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")
（当然，这仅在您按 Enter 并将值提交给“onchange”时才有效）
回答by Cerbrus
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.
（实际上，这是您当前的代码。您是否导入了 jQuery 库？）
请记住，您已将滑块的范围设置为 200。尝试一些介于 0 和 200 之间的值。
回答by Zening Qu
It's actually quite easy. It's all written in jQuery Tools API documentation. So I changed my code to this and it worked:
这实际上很容易。这一切都写在jQuery Tools API 文档中。所以我把我的代码改成了这个，它起作用了：
<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>
回答by Manuel Choucino
in my side I did it in just Javascript and adding a onchange event.
在我这边，我只用 Javascript 完成并添加了一个 onchange 事件。
I also added the value=0 to range so that make it start at the beguining.
我还将 value=0 添加到 range 中，使其从开始处开始。
<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;
} ?
回答by Nobody Really
$('#box').change(function(){
$('#slider').attr({"value":parseInt(this.value)});
});
Might work.
可能工作。
