本文介绍如何通过 javascript 实现两个 range 输入框的联动控制：当主滑块（火灾保额）变化时，自动计算并更新从属滑块（电气损坏保额）的最大值为前者值的 30%，但上限严格限制为 60。
本文介绍如何通过 javascript 实现两个 range 输入框的联动控制：当主滑块（火灾保额）变化时，自动计算并更新从属滑块（电气损坏保额）的最大值为前者值的 30%，但上限严格限制为 60。
在实际表单开发中，常需实现滑块间的动态约束逻辑——例如保险产品配置中，“电气损坏保额”不能超过“火灾保额”的 30%，且绝对上限为 60（单位：万元）。这要求从属滑块（#range-eletrico）的 max 属性随主滑块（#range-basica）实时更新，并同步重置其当前值以避免越界。
以下是完整、健壮的实现方案：
✅ 正确绑定事件与逻辑
关键在于仅监听主滑块的 input 事件（而非从属滑块），并在每次触发时：
- 计算理论最大值：0.3 * 主滑块当前值
- 应用上限截断：取 Math.min(理论值, 60)
- 更新从属滑块的 max 属性和当前值（重置为 0 或当前有效值，推荐设为 0 避免无效状态）
const sliderBasica = document.getElementById("range-basica");
const sliderEletrico = document.getElementById("range-eletrico");
const outputBasica = document.getElementById("range-basica-value");
const outputEletrico = document.getElementById("range-eletrico-value");
const eletricoMaxSpan = document.getElementById("eletrico-max");
// 初始化显示
outputBasica.textContent = sliderBasica.value;
outputEletrico.textContent = sliderEletrico.value;
// 主滑块变化时，动态更新从属滑块的 max 和显示
sliderBasica.addEventListener("input", () => {
const targetMax = Math.min(0.3 * sliderBasica.value, 60);
sliderEletrico.max = targetMax;
// 重置从属滑块值，确保不超出新范围（可选：保留原值但需校验）
if (parseFloat(sliderEletrico.value) > targetMax) {
sliderEletrico.value = targetMax;
}
outputBasica.textContent = sliderBasica.value;
outputEletrico.textContent = sliderEletrico.value;
eletricoMaxSpan.textContent = targetMax.toFixed(0); // 显示整数
});⚠️ 注意事项
- 不要监听从属滑块的 input 来更新自身 max：这会导致逻辑混乱（max 变化后当前值可能非法，引发不可预测行为）。
- 必须同步更新 UI 显示：包括 #eletrico-max 文本和两个滑块的数值标签，否则用户感知滞后。
- 边界校验：当 max 缩小时，需检查 sliderEletrico.value 是否已超限，若超限则主动修正（如上例所示）。
- 初始状态一致性：页面加载时应手动初始化所有显示值，避免 DOM 渲染延迟导致的空白或错误值。
✅ 补充优化建议（进阶）
- 使用 Math.round() 或 toFixed(0) 统一输出格式；
- 添加 change 事件处理以兼容键盘/焦点操作；
- 封装为可复用函数，支持多组联动滑块；
- 结合 CSS 自定义样式提升交互体验（如禁用状态提示、范围高亮等）。
该方案简洁、可靠，完全满足「30% 动态上限 + 60 硬性封顶」的核心需求，是表单联动控制的典型实践。
