Jquery UI：範囲スライダ。どのスライダーが動かされますか？

Question

このデモページでは：私の目的のために

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

私は（minまたはmax）に移動されている2つのスライダーのどの、知りたい：http://jqueryui.com/demos/slider/#event-change

イベント「スライド」リライトは、一度に2つの入力を持っています。どのように私はそれを得ることができますか？

Answer 1

@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 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

私はスライダーAPI http://api.jqueryui.com/1.8/slider/#event-createによって定義されたイベントを作成する上でのID minに属性値と最大値セレクタを設定することでこれを解決しました。戻って私のslideイベントで、その後

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

...と私移動している1取得するui.handlerから単純に赤ID属性:)

Answer 4

右スライダーハンドラとは異なり、スライダーコンテナの最後の子があるので、左ハンドラ、右ハンドラが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

スライドイベントは、eventとuiの2つのパラメータをとります。 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 
     } 
    } 
}); 

これは、指定されたスライダ内の任意の数のハンドルに対して機能します。しかし、インデックスは0ではなく1で始まることに注意してください。