如何用单个slider滑动条同时控制分、秒两个Input输入框的数值

核心逻辑 #

要实现单个滑动条同时控制分、秒两个输入框，只需做三处调整：

• 调整时间滑动条的最大值，覆盖59分59秒对应的总秒数范围
• 新增转换函数，将滑动条返回的总秒数拆分为分钟、秒两个独立值
• 把滑动条的输入事件绑定到转换函数，同步更新两个输入框的数值

完整可运行代码 #

<!DOCTYPE html>
<html>
<body>

<label>单输入框关联滑动条</label><br>
<input id="A"
       type="number"
       class="occupied"
       required=""
       min="1"
       max="100"
       onkeyup="if(parseInt(this.value) > 100){ this.value = 100; return false; }"
>
<br>
<input id="MDLslider" class="occupied" type="range" min="0" max="340" oninput="A.value=MDLslider.value"/>
<br>
<br>
<br>


<label>双输入框（分/秒）关联滑动条</label><br>
<input id="D"
       type="number"
       class="occupied"
       placeholder="Minutes"
       required=""
       min="0"
       max="59"
       onkeyup="if(parseInt(this.value) > 59){ this.value = 59; return false; }"
>
<input id="E"
       type="number"
       class="occupied"
       placeholder="Seconds"
       required=""
       min="0"
       max="59"
       onkeyup="if(parseInt(this.value) > 59){ this.value = 59; return false; }"
>
<input id="TIMEslider" class="occupied" type="range" min="0" max="3599" oninput="updateTimeInputs(this.value)"/>

<script>
function updateTimeInputs(totalSeconds) {
    // 总秒数转分钟：除以60取整
    const minutes = Math.floor(totalSeconds / 60);
    // 总秒数转剩余秒数：对60取余
    const seconds = totalSeconds % 60;
    // 赋值到对应输入框
    document.getElementById('D').value = minutes;
    document.getElementById('E').value = seconds;
}
</script>

</body>
</html>

关键改动说明 #

• 新增了updateTimeInputs处理函数，负责总秒数到分、秒的拆分计算
• 将TIMEslider的max属性从原来的59改为3599，刚好匹配59分59秒的最大时间范围
• 把TIMEslider的oninput事件绑定到自定义处理函数，一次触发同时更新两个输入框的值
• 若你需要分钟/秒的最小值为1，只需把两个时间输入框的min属性改回1，并在updateTimeInputs函数中添加边界判断即可

内容的提问来源于stack exchange，提问作者Jim O.