Question

在此演示页面：http://jqueryui.com/demos/slider/#event-change

事件'slide'重写一次有两个输入：

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

出于我的目的，我想知道，两个滑块中的哪一个被移动（最小或最大）。我怎么能得到它？

Answer 1

右滑块处理程序是滑块容器的最后一个子节点，因此，与左处理程序不同，右边处理程序没有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 2

即使我最近遇到了同样的问题。使用范围滑块时，需要确定移动了哪个滑块（右侧或左侧）。 没有直接方式来确定，但是ui对象具有可用于确定移动了哪个滑块的属性value和values。以下是适合我的解决方案： -

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

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

希望这会有所帮助。

Answer 4

幻灯片事件有两个参数：event和ui。 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。

Answer 5

我通过将ID属性设置为滑块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事件中，我只是从ui.handler获取红色ID属性以获取正在移动的内容：）

Jquery UI：范围滑块。哪个滑块移动了？

5 个答案: