如何用JavaScript将Range Slider值同步更新到Input输入框？

你的代码存在两处关键错误，导致滑块拖动时无法更新输入框内容：

1. 错误地将output变量赋值为输入框的value属性值（即滑块的初始数值），而非输入框的DOM元素本身，后续无法通过该变量操作输入框。
2. 输入框（<input type="number">）需通过value属性更新内容，innerHTML仅适用于更新<span>这类元素的内部HTML结构，对输入框无效。

修正后的完整代码如下：

<div class="slidecontainer">
  <input type="range" min="1" max="100" value="50" class="slider" id="myRange">
  <input type="number" id="demo" name="fname" value="">
</div>

<script>
var slider = document.getElementById("myRange");
var output = document.getElementById("demo");
// 初始化输入框的初始值
output.value = slider.value;

// 滑块拖动时同步更新输入框值
slider.oninput = function() {
  output.value = this.value;
}
</script>

修正要点说明： #

• 先获取输入框DOM元素赋值给output，保留对元素的引用，而非直接赋值它的value属性。
• 初始化和滑块拖动时，均使用output.value来设置输入框的内容，适配输入框的属性规则。

内容的提问来源于stack exchange，提问作者NeoFox1972