javascript - jQuery UI slider : Allow handles to cross over

Question

我在以下网页上使用范围 slider http://www.mattpealing.co.uk/_concept/brdcr/calc/patient-static.html (参见“日夜轮类”)

我已经像这样定制了它，这样它就可以在几小时和几分钟内工作(以 15 分钟为增量):

$(function() {
    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1439,
        values: [ 0, 1000 ],
        step: 15,
        slide: function(e, ui) {
            var hoursDay = Math.floor(ui.values[0] / 60);
            var minutesDay = ui.values[0] - (hoursDay * 60);

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

            if(hoursDay.toString().length == 1) hoursDay = '0' + hoursDay;
            if(minutesDay.toString().length == 1) minutesDay = '0' + minutesDay;

            if(hoursNight.toString().length == 1) hoursNight = '0' + hoursNight;
            if(minutesNight.toString().length == 1) minutesNight = '0' + minutesNight;

            $('.time-day').text(hoursDay+':'+minutesDay);
            $('.time-night').text(hoursNight+':'+minutesNight);
        }
    });
});

我现在需要做的是设置它以便 handle 可以重叠。这样，用户就可以指定轮类时间，例如 20:00–04:00。此外，当 handle 重叠时，突出显示的蓝色条应反射(reflect)它，而不是出现在 handle 中间

目前这是不可能的。

我什至不知道从哪里开始才能实现这一目标，有人有什么建议吗？

Answer 1

您可以通过一些技巧反转范围 slider 。这是带有点击事件的示例:

HTML

<div id="slider-range"></div>

<div class="from time-day"></div>
<div class="to time-night"></div>

<button>Invert</button>

JS

$(document).ready(function() {

    $('button').click(function() {
        $('#slider-range, #slider-range .ui-slider-range').toggleClass('ui-widget-header ui-widget-content');
        var timeFrom = $(".from").text();
        var timeTo = $(".to").text();
        $(".from").html(timeTo).toggleClass("time-day").toggleClass("time-night");
        $(".to").html(timeFrom).toggleClass("time-night").toggleClass("time-day");
    });

    $("#slider-range").slider({
        range: true,
        min: 0,
        max: 1439,
        values: [ 0, 1000 ],
        step: 15,
        slide: function(e, ui) {
            var hoursDay = Math.floor(ui.values[0] / 60);
            var minutesDay = ui.values[0] - (hoursDay * 60);

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

            if(hoursDay.toString().length == 1) hoursDay = '0' + hoursDay;
            if(minutesDay.toString().length == 1) minutesDay = '0' + minutesDay;

            if(hoursNight.toString().length == 1) hoursNight = '0' + hoursNight;
            if(minutesNight.toString().length == 1) minutesNight = '0' + minutesNight;

            $('.time-day').text(hoursDay+':'+minutesDay);
            $('.time-night').text(hoursNight+':'+minutesNight);
        }
    });
});

工作中fiddle

我没有时间进一步讨论，但您可以将此代码与另一段代码相适应以检测重叠，如下所示:

  $( "#slider-range" ).bind( "slide", function(event, ui) {
      var values = $( "#slider-range" ).slider( "option", "values" );
      if (ui.values[0] >= ui.values[1]) {
            console.log("overlap");
      }
  });

希望有帮助。