JQuery UI Slider: Разрешить ручки, чтобы пересечь

Question

Я использую ползунок диапазона на следующей странице http://www.mattpealing.co.uk/_concept/brdcr/calc/patient-static.html (см «Day & Night Shift»)

я настроить его таким образом, чтобы она работала в часах и минут (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"); 
     } 
    }); 

Надеюсь, это помогло.