7

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

事件“幻灯片”重写一次有两个输入：

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

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

4

5 回答 5

12

右滑块处理程序是滑块容器的最后一个子项，因此，与左处理程序不同，右处理程序没有 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 ...
        }
    }
});
于 2014-04-04T12:11:22.707 回答
8

即使我最近也遇到了同样的问题。使用范围滑块时，您需要确定移动了哪个滑块（右侧或左侧）。没有直接的方法可以确定，但是uiobject 具有 attributes ，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)
      }
于 2013-05-29T04:56:03.077 回答
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);               
    }
 });

希望这会有所帮助。

于 2012-09-02T18:23:31.847 回答
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 开始。

于 2015-07-06T18:07:50.680 回答
1

我通过在滑块 API http://api.jqueryui.com/1.8/slider/#event-create定义的创建事件上将 ID 属性设置为最小和最大选择器来解决这个问题。

          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中获取哪个正在移动:)

于 2013-12-09T22:51:18.277 回答