JavaScript实现多范围滑块动态同步更新对应数字输入框

问题根源 #

现有代码仅第一组生效是两个原因导致的：

• HTML规范要求单页面内id属性全局唯一，你给所有滑块都设置了相同的id="customRange"、所有数字输入框都设置了相同的id="demo"，document.getElementById只会匹配到页面中第一个对应id的元素，其余控件完全不会被选中
• 原有逻辑仅针对单个元素绑定事件，没有做通用批量处理，无法覆盖所有表单项，且对表单输入框错误使用innerHTML赋值，本身写法存在问题

实现方案 #

不需要为每个表单项单独写逻辑，只要保持现有DOM结构（滑块和对应数字框都在同一个.range-wrap容器内），用通用遍历+DOM关联查找的方式即可实现全量联动，后续新增同结构表单项也会自动生效，无需修改JS代码。

• （可选但建议）先修正HTML不规范问题：删除所有重复的id="customRange"和id="demo"属性，我们不需要依赖id即可完成元素绑定
• 替换原有JS代码为以下通用逻辑：

// 选中所有滑块控件，批量绑定事件
document.querySelectorAll('.form-range').forEach(slider => {
  // 查找当前滑块同组对应的数字输入框：向上找到共同父容器.range-wrap，再在容器内找数字输入框
  const numberInput = slider.closest('.range-wrap').querySelector('input[type="number"]');

  // 初始化对齐默认值
  numberInput.value = slider.value;

  // 拖动滑块时同步更新数字输入框
  slider.addEventListener('input', function() {
    numberInput.value = this.value;
  });

  // 可选扩展：修改数字输入框时反向同步滑块位置，交互体验更完整
  numberInput.addEventListener('input', function() {
    // 限制输入值在滑块的min-max范围内，避免非法值
    const min = Number(slider.min);
    const max = Number(slider.max);
    const val = Math.min(max, Math.max(min, Number(this.value)));
    slider.value = val;
    this.value = val;
  });
});

逻辑说明 #

• 完全基于现有类名和DOM层级关系匹配元素，不依赖id，不会出现组间匹配错误的问题
• 一次绑定覆盖所有现有表单项，后续新增同结构的滑块+数字框组，不需要额外加JS代码
• 可选的反向同步逻辑加了范围校验，避免用户输入超出滑块允许的最大/最小值

问题效果参考：表单字段效果截图（仅第一个输入框可正常更新）

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