Question

我在以下网页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的班次。此外，当手柄重叠时，突出显示的蓝色条应该反映它而不是出现在手柄的中间

目前这是不可能的。

我甚至无法想到从哪里开始才能实现这一点，是否有人有任何建议？

Answer 1

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

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

希望它有所帮助。

jQuery UI Slider：允许句柄跨越

1 个答案: