如何实现拖动滑块同步修改两个代表时间的输入框数值

你要的效果可以通过把滑块值映射为总秒数，再自动换算为分钟、秒的方式实现，完整可运行代码如下：

<!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="updateSliderFromInput()"
       onchange="updateSliderFromInput()"
>
<input id="E"
       type="number"
       class="occupied"
       placeholder="Seconds"
       required=""
       min="0"
       max="59"
       onkeyup="if(parseInt(this.value) > 59){ this.value = 59; updateSliderFromInput(); return false; }"
       onchange="updateSliderFromInput()"
>
<input id="TIMEslider" class="occupied" type="range" min="0" max="3599" oninput="updateTimeInput(this.value)"/>

<script>
// 滑块拖动时更新时间输入框
function updateTimeInput(sliderVal) {
    // 滑块右移数值减小的核心逻辑：用最大总秒数减去当前滑块值
    const totalSeconds = 3599 - Number(sliderVal);
    const minutes = Math.floor(totalSeconds / 60);
    const seconds = totalSeconds % 60;
    document.getElementById('D').value = minutes;
    document.getElementById('E').value = seconds;
}

// 手动修改输入框时同步滑块位置
function updateSliderFromInput() {
    const minutes = Number(document.getElementById('D').value) || 0;
    const seconds = Number(document.getElementById('E').value) || 0;
    // 输入合法性校验
    const validMin = Math.max(0, Math.min(59, minutes));
    const validSec = Math.max(0, Math.min(59, seconds));
    const totalSeconds = validMin * 60 + validSec;
    document.getElementById('TIMEslider').value = 3599 - totalSeconds;
}

// 页面加载时初始化默认值
updateTimeInput(0);
</script>

</body>
</html>

实现逻辑说明 #

• 首先把时间滑块的最大值设为3599，对应59分59秒的总秒数，覆盖所有可能的时间取值
• 滑块拖动时，用最大总秒数减去当前滑块值得到要显示的总秒数，除以60取整得到分钟、取余60得到秒，分别赋值给两个输入框，就实现了滑块右移数值减小的效果
• 额外加了输入框修改的同步逻辑，手动改分钟或者秒的时候，滑块会自动跳到对应位置，同时做了数值合法性校验，避免输入超出范围

你可以根据自己的需求调整最大总秒数，比如你不需要到59分59秒，只要到10分钟的话，就把滑块最大值改成600（10*60），同时把计算里的3599也改成600即可。

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