Jquery UI: suwak zasięgu. Który suwak jest przesuwany?

Question

Na tej stronie demo: http://jqueryui.com/demos/slider/#event-change

Zdarzenie „slide” przepisać posiada dwa wejścia na raz:

$("#amount").val("$" + $("#slider-range").slider("values", 0) + 
      " - $" + $("#slider-range").slider("values", 1)); 

do moich celów Chcę wiedzieć, który z dwóch suwaków są przenoszone (min lub max) . Jak mogę to zdobyć?

Answer 1

@Nikoole, nie ma specyficzny sposób, aby dowiedzieć się, jakie jest uchwyt przesuwny, ale można spróbować tej sztuczki

var minSlide = 75, maxSlide = 300; 
$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if(minSlide != parseInt(ui.values[0], 10)){ 
      // Do what in minimum handle case 
     } 
     else if(maxSlide != parseInt(ui.values[1], 10)) { 
      // Do what in maximum handle case 
     } 
    }, 
    stop: function(event, ui){ 
     minSlide = parseInt(ui.values[0], 10); 
     maxSlide = parseInt(ui.values[1], 10);    
    } 
}); 

nadzieję, że to pomoże.

Answer 2

Nawet ja ostatnio zmierzyłem się z tym samym problemem. Używając suwaka zasięgu, musisz określić, który suwak (prawy lub lewy) został przeniesiony. Istnieje bez bezpośredniego, sposób ustalenia tego, ale jednak, obiekt ui ma atrybuty, value i values, które można wykorzystać do określenia, który suwak został przeniesiony. Oto rozwiązanie, które pracował dla mnie: -

 $("#slider-range").slider({ 
     range: true, 
     min: 75, 
     max: 300, 
     values:[75,300], 
     slide: function(event, ui) { 
     target_name = '' 
     if(ui.values[0] == ui.value) target_name = 'min_price' 
     else if(ui.values[1] == ui.value) target_name = 'max_price' 
     alert(target_name) 
     } 

Answer 3

Rozwiązałem to przez ustawienie atrybutu ID do MIN i MAX na selektorów utworzyć zdarzenie zdefiniowane przez suwak API http://api.jqueryui.com/1.8/slider/#event-create.

  create:function(event, ui) 
     { 
     var handlers = $('.ui-slider-handle'); 
     $.each(handlers, function(i, element) 
     { 
      if(i == 0) 
       $(element).attr('id', 'slider-handler-min'); 
      else 
       $(element).attr('id', 'slider-handler-max'); 
     }); 
     } 

... a potem z powrotem w moim przypadku po prostu slide czerwony atrybut ID z ui.handler dostać których jedna porusza :)

Answer 4

Prawy obsługi suwak jest ostatnim dzieckiem pojemnika suwak, więc, w przeciwieństwie do left handler, prawy handler nie ma nextSibling:

$('#slider-range').slider({ 
    range: true, 
    min: 0, max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     if (ui.handle.nextSibling) { 
      // Moving LEFT slider ... 
     } else { 
      // Moving RIGHT slider ... 
     } 
    } 
}); 

Answer 5

Zdarzenie slide ma dwa parametry: event i ui. ui zawiera obiekt uchwytu. można uzyskać dostęp i przetestować indeks uchwytu tak:

$("#slider-range").slider({ 
    range: true, 
    min: 0, 
    max: 500, 
    values: [ 75, 300 ], 
    slide: function(event, ui) { 
     var index = $(ui.handle).index(); 
     if (index == 1) { 
      // do stuff for minimum 
     } 
     if (index == 2) { 
      // do stuff for maximum 
     } 
    } 
}); 

To działa dla dowolnej liczby uchwytów w danym suwaka. Należy jednak pamiętać, że indeksy zaczynają się od 1 nie 0.