javascript - jQuery UI Slider: Allow handles to cross over -

i using range slider on following webpage http://www.mattpealing.co.uk/_concept/brdcr/calc/patient-static.html (see 'day & night shift')

i have customised so, works in hours , 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 need set handles can overlap. way allow user specify shift of, say, 20:00–04:00. when handles overlap, highlighted blue bar should reflect instead of appearing in middle of handles

currently not possible.

i can't think of start in order achieve this, have suggestions?

you can invert range slider tricks. sample 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 not have time go further can adapt code piece of code detect overlap :

  $( "#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 helped.