尝试获取滑块以更改 HTML 中的文本字段值

Question

我有一个滑块，它从文本字段获取输入并相应地重置其位置；但是，我无法弄清楚如何执行以下操作：

这样滑块会根据范围内的任何值自动重新定位，而不仅仅是非十进制输入。
使文本字段值随着滑动条的切换而相应改变。

代码如下。

感谢任何帮助，谢谢！

<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>

<script>
    var slider = document.getElementById('slider');
    $('#input').change(function(){
        slider.value=parseInt(this.value)
    });
</script>

Answer 1

I have a sliderbar that takes input from the textfield and resets its position accordingly;

由于您使用的是 parseInt 并且为此需要 parseFloat，因此我看不出它如何与给定的代码一起工作。无论如何，以下是您的要求：

$('#input').change(function() {
  $('#slider').val(parseFloat(this.value))
});
$('#slider').on("input change", function() {
  $('#input').val(this.value)
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<div>
  <input id="slider" type="range" min="0" max="2" step="0.001" />
  <input id="input" type="text" value="1" />
</div>

Answer 2

您不需要使用 parseInt()，因为两者都需要是字符串。

<div>
<input id="slider" type="range" min="0" max="2" step="0.001"/>
<input id="input" type="text" value="1"/>
</div>

<script>
    var slider = document.getElementById('slider');
    $('#input').change(function(){
        slider.value=this.value
    });
</script>

尝试获取滑块以更改 HTML 中的文本字段值

Trying to get a sliderbar to alter a textfield value in HTML

html

javascript

jquery

slider

textfield