7

このデモページ： http： //jqueryui.com/demos/slider/#event-change

イベント「slide」の書き換えには、一度に2つの入力があります。

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

私の目的のために、2つのスライダーのどちらが動かされるか（最小または最大）を知りたいです。どうすれば入手できますか？

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

私も最近同じ問題に直面しました。範囲スライダーを使用する場合は、移動したスライダー（右または左）を判別する必要があります。これを直接判断する方法はありませんが、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)
      }
于 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の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から始まることに注意してください。

于 2015-07-06T18:07:50.680 に答える
1

スライダーAPIhttp ://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 に答える