如何通过 JavaScript 动态更新 range 输入框的实时值显示

本文介绍如何为 `` 元素绑定事件监听，实现在拖动滑块时实时更新关联的 `` 或 `

` 标签中的数值，解决“值不随滑块变化”的 常见问题。

要让 的当前值（如密码长度）实时反映在页面上（例如显示为 00 的 ），关键在于正确监听 input 事件——而非 change 事件。input 事件在用户拖动过程中持续触发，确保数值即时同步；而 change 仅在释放滑块后触发一次，无法满足实时反馈需求。

以下是一个完整、可直接运行的示例：

 15

// JavaScript 逻辑 const lengthSlider = document.getElementById("pass-length-slider"); const lengthValueSpan = document.getElementById("pass-length-value");  // 使用 input 事件实现毫秒级响应 lengthSlider.addEventListener("input", () => {lengthValueSpan.textContent = lengthSlider.value;   // ✅ 可在此处链式调用其他逻辑，如：// generatePassword();   // updatePassIndicator();});

⚠️ 注意事项：

• 确保 DOM 元素已加载完成再执行脚本（推荐将 JS 放在