滑块 html 控件中未设置值

Question

关于 HTML 中的 Range 输入类型 当我更改滑块（范围输入类型）中的值时，该值在文本框中显示 但是当我在文本框中更改值时也没有在滑块中设置该值（范围输入类型）。 这是代码 它的功能： 我们还希望当我们滑动滑块时，文本框中的值也会发生变化 功能：

 <script type="text/javascript">
function updateTextInput(val) {
document.getElementById('textInput').value=val; 
}
function updateTextInput2(val) {
document.getElementById('range1').value = val;
}
</script> 

HTML：

<input type="range" min="0" max="100" value="0" id="range1"      onchange="updateTextInput(this.value);"/>
   <input type="text" id="textInput" value="0"      onchange="updateTextInput2(this.value);"> 

Answer 1

调试updateTextInput函数以验证要设置的值，

或者试试

document.getElementById('textInput').value = document.getElementById('range1').value;

Answer 2

您需要将文本框中调用函数的事件从onchange更改为oninput。 onchange 事件仅在控件失去焦点后触发，即当用户单击其他内容时。每次用户更改文本框中的值时，都会触发 oninput 事件。

您的代码应如下所示：

<input type="range" min="0" max="100" value="0" id="range1" onchange="updateTextInput(this.value);" />
<input type="text" id="textInput" value="0" oninput="updateTextInput2(this.value);">

您的 JavaScript 函数可以 100% 正常工作。

这是codepen 上的一个工作示例。