如何根据总时数制作Time Jquery Slider

Question

我需要从04:30小时到45:30的时间滑块。

我尝试下面的代码

<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>

$("#slider-range").slider({
    range: true,
    min: 258, /* 04:30 */
    max: 2718, /*45:30*/
    step: 15,
    values: [258, 2718],
    slide: function (e, ui) {
        var hours1 = Math.floor(ui.values[0] / 60);
        var minutes1 = ui.values[0] - (hours1 * 60);

        if (hours1.length == 1) hours1 = '0' + hours1;
        if (minutes1.length == 1) minutes1 = '0' + minutes1;
        if (minutes1 == 0) minutes1 = '00';

        $('.slider-time').html(hours1 + ':' + minutes1);

        var hours2 = Math.floor(ui.values[1] / 60);
        var minutes2 = ui.values[1] - (hours2 * 60);

        if (hours2.length == 1) hours2 = '0' + hours2;
        if (minutes2.length == 1) minutes2 = '0' + minutes2;
        if (minutes2 == 0) minutes2 = '00';

        $('.slider-time2').html(hours2 + ':' + minutes2);
    }
});

此处计算min，max时间为04.30 * 60

但是滑块小时是从min - 04:18和max - 45:18开始的，我需要min - 04:30和max - 45:38

Answer 1

仅是因为您的数学错误。 4.5小时是270分钟，而不是258。同样，45.5小时是[CO]分钟。这是一个工作版本：

2730

$("#slider-range").slider({
  range: true,
  min: 270,
  max: 2730,
  step: 15,
  values: [270, 2730],
  slide: function(e, ui) {
    $('.slider-time').each(function(i) {
      var hours = ("00" + Math.floor(ui.values[i] / 60)).slice(-2);
      var mins = ("00" + (ui.values[i] - (hours * 60))).slice(-2);
      $(this).html(hours + ':' + mins);
    });
  }
});

注意，我也改进了格式化逻辑。

Answer 2

请让我知道此代码适用于离子代码