jQuery UI Slider: Allow handles to cross over

Question

I am using a range slider on the following webpage http://www.mattpealing.co.uk/_concept/brdcr/calc/patient-static.html (see 'Day & Night Shift')

I have customised it like so, so that it works in hours and minutes (15 minute increments):

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

What I need to do now is to set it so that the handles can overlap. This way it will allow the user to specify a shift of, say, 20:00–04:00. Also when the handles overlap, the highlighted blue bar should reflect it instead of appearing in the middle of the handles

Currently this is not possible.

I can't even think of where to start in order to achieve this, does anyone have any suggestions?

Answer 1

You can invert your range slider with some tricks. This is a sample with a click event :

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

Working fiddle

I do not have time to go further but you can adapt this code with another piece of code to detect an overlap like this :

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

Hope it helped.