JQuery UI: ползунок диапазона. Какой слайдер перемещается?

на этой демо-странице: http://jqueryui.com/demos/slider/#event-change

перезапись события "слайд" имеет два входа одновременно:

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

для моих целей я хочу знать, какой из двух ползунков перемещается (min или max). Как мне его достать?

6
jquery jquery-plugins jquery-ui

5 ответов

@Nikoole, нет конкретного метода, чтобы найти, какая ручка скользит, но вы можете попробовать этот трюк

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

надеюсь, это поможет.

5

правый обработчик слайдера является последним дочерним элементом контейнера слайдера, поэтому, в отличие от левого обработчика, правый обработчик не имеет 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 ...
        }
    }
});
11

даже я столкнулся с той же проблемой. При использовании ползунка диапазона необходимо определить, какой ползунок (правый или левый) был перемещен. Есть прямой способ определить это, но тем не менее,

8

событие слайда принимает два параметра: event и ui. пользовательский интерфейс содержит объект обработки. Вы можете получить доступ и проверить индекс дескриптора следующим образом:

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

это работает для любого количества дескрипторов в данном слайдере. Но учтите, что индексы начинаются с 1 а не 0.

3

я решил это, установив атрибут ID в min и max селекторы при создании события, определенного slider 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');
         });
      }

...а потом обратно в мой slide событие я просто красный атрибут ID из ui.handler чтобы получить, какой из них движется:)

1