1

我在以下网页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);
        }
    });
});

我现在需要做的是设置它，使手柄可以重叠。这样，它将允许用户指定班次，例如 20:00–04:00。此外，当手柄重叠时，突出显示的蓝色条应反映它，而不是出现在手柄中间

目前这是不可能的。

我什至想不出从哪里开始来实现这一目标，有人有什么建议吗？

4

1 回答 1

0

您可以使用一些技巧来反转您的范围滑块。这是一个带有点击事件的示例：

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);
        }
    });
});

工作小提琴

我没有时间更进一步，但您可以使用另一段代码调整此代码以检测这样的重叠：

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

希望它有所帮助。

于 2016-01-29T12:51:00.713 回答