如何制作基于总时长的jQuery时间滑块？修正范围显示异常

我帮你排查了代码里的问题，主要有两个核心原因导致滑块显示的时间不对，下面是具体的修正方案：

问题1：分钟数计算错误 #

你把04:30和45:30转成分钟数时算错了：

• 04:30 = 4小时×60 + 30分钟 = 270（不是258）
• 45:30 = 45小时×60 +30分钟 = 2730（不是2718）
  这直接导致滑块的起始/结束范围偏移了12分钟，所以显示出04:18和45:18。

问题2：数字的length属性误用 #

代码里用hours1.length、minutes1.length来判断是否需要补0，但数字类型没有length属性，必须先转成字符串再判断长度，否则补0逻辑完全不生效。

修正后的完整代码 #

<div id="time-range">
  <p>Time Range: <span class="slider-time">04:30</span> - <span class="slider-time2">45:30</span></p>
  <div class="sliders_step1">
    <div id="slider-range"></div>
  </div>
</div>

<script>
$("#slider-range").slider({
  range: true,
  min: 270,  /* 04:30 正确的分钟数 */
  max: 2730, /* 45:30 正确的分钟数 */
  step: 15,
  values: [270, 2730],
  slide: function (e, ui) {
    // 处理起始时间
    var totalMinutes1 = ui.values[0];
    var hours1 = Math.floor(totalMinutes1 / 60);
    var minutes1 = totalMinutes1 % 60;
    // 转成字符串后补0
    hours1 = hours1.toString().padStart(2, '0');
    minutes1 = minutes1.toString().padStart(2, '0');
    $('.slider-time').html(`${hours1}:${minutes1}`);

    // 处理结束时间
    var totalMinutes2 = ui.values[1];
    var hours2 = Math.floor(totalMinutes2 / 60);
    var minutes2 = totalMinutes2 % 60;
    hours2 = hours2.toString().padStart(2, '0');
    minutes2 = minutes2.toString().padStart(2, '0');
    $('.slider-time2').html(`${hours2}:${minutes2}`);
  }
});
</script>

额外优化说明 #

我把原来的minutes = total - (hours*60)改成了minutes = total % 60，这样计算分钟数更简洁直观；同时用padStart(2, '0')来替代手动的if判断，代码更简洁易读，效果是一样的——自动给小于10的数字补前导0。

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