如何实现HTML Range滑块拖动时实时更新页面数值？

当然可以实现！你当前的代码应该是只绑定了change事件（这个事件仅在滑块释放时触发），要实现拖动过程中实时更新，只需要改用input事件（它会在滑块拖动的每一刻触发），同时保留change事件可以兼容一些边缘场景（比如用键盘调整滑块时）。

下面是修改后的完整代码示例：

<h1>Player 1</h1>
<div class="slider-group">
  <label for="P1H">Hue:</label>
  <input type="range" id="P1H" min="0" max="360" value="180" oninput="updateSlider()" onchange="updateSlider()">
  <span id="P1H_value">180</span>
  
  <label for="P1S">Saturation:</label>
  <input type="range" id="P1S" min="0" max="100" value="50" oninput="updateSlider()" onchange="updateSlider()">
  <span id="P1S_value">50</span>
</div>

<script>
function updateSlider() {
  document.getElementById('P1H_value').innerHTML = document.getElementById("P1H").value;
  document.getElementById('P1S_value').innerHTML = document.getElementById("P1S").value;
}
// 页面加载时先初始化一次数值，避免显示和滑块实际值不一致
updateSlider();
</script>

关键说明： #

• 给每个range元素添加oninput="updateSlider()"：这个事件会在滑块拖动过程中持续触发，让数值实时同步更新。
• 保留onchange="updateSlider()"：确保用户通过键盘调整滑块（比如按方向键）或者释放滑块时，数值也能正确更新，覆盖更多交互场景。
• 页面加载时调用updateSlider()：解决初始状态下显示数值和滑块默认值不匹配的问题。

另外注意你原代码里的clas是拼写错误，应该改成class，记得修正哦。

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