如何通过JavaScript实现滑块（slider）滑动时数值实时更新？

你当前代码用的change事件，只会在滑块停止拖动（比如松开鼠标、结束键盘操作）时触发，所以数值没法跟着滑动实时变化。要实现滑动过程中实时更新，只需要把监听的事件换成input——这个事件会在滑块拖动的整个过程中持续触发。

修改后的完整代码如下：

JavaScript 代码 #

var slider = document.querySelector('#slider');
var result = document.querySelector('#result');

// 监听input事件实现实时更新
slider.addEventListener('input', function(event) {
  var sliderValue = event.target.value;
  var maxValue = 2000;
  var coef = 18;
  var calc = maxValue - (sliderValue * coef);
  result.value = calc;
});

// 可选：保留change事件处理滑块停止后的额外逻辑（比如数值验证、提交操作等）
slider.addEventListener('change', function(event) {
  // 这里可以添加滑块停止后的自定义操作
});

HTML 代码（无需修改） #

<input id="slider" type="range" name="points" min="0" max="100" value=0>
<input id="result" type="text" name="result">

修改后拖动滑块时，result输入框的数值就会实时同步变化了。如果需要在滑块停止后执行额外操作，还可以同时保留change事件的监听逻辑。

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