Jquery UI:范围滑块.哪个滑块移动了？

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

希望这会有所帮助.