Jquery UI：範圍滑塊。哪個滑塊被移動？

在此演示頁面：http://jqueryui.com/demos/slider/#event-change Jquery UI：範圍滑塊。哪個滑塊被移動？

事件「滑」重寫有一次兩個輸入：

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

對於我而言，我想知道，這兩個滑塊的移動（最小或最大）。我怎麼能得到它？

來源

2012-09-02 Nikoole

_min或max_？你能詳細說明嗎？ – undefined

您是否問過兩個滑塊，每個滑塊都帶有單個手柄，或者帶有兩個手柄的單個滑塊（「範圍」滑塊）？ –

馬特球，我問兩個手柄單滑塊。 – Nikoole

@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-02 18:23:31

使用parseInt時不要忘記基數。 – j08691

謝謝@ j08691，我會相應地更新我的答案。 –

Kundan Singh Chouhan，非常感謝！你的意思是：'否則，如果（** ** maxSlide = parseInt函數（ui.values [1]，10）！）{// 在做最大的手柄情況下什麼 }' – Nikoole

即使我最近面臨同樣的問題。使用範圍滑塊時，您需要確定哪個滑塊（右側或左側）已移動。有沒有直接方法來確定，但然而，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-29 04:56:03

我通過創建由滑塊API http://api.jqueryui.com/1.8/slider/#event-create定義的事件設置ID屬性爲MIN和MAX選擇解決了這個。

  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屬性來獲得哪一個是移動:)

來源

2013-12-09 22:51:18 bpile

我喜歡你的解決方案，但如果頁面上有多個滑塊，使用ID將發生衝突。我會建議添加一個類。這也可能允許單個滑塊具有最大和最小類別，因此避免爲單個和範圍編碼不同。 – pperrin

右邊的滑塊處理器是滑蓋容器的最後一個孩子，所以，不像左側處理程序，右側處理程序沒有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-04 12:11:22 cfillol

美麗的解決方案！爲「返回虛假」狀態工作完美。謝謝！ – kingkode

這是最快的解決方案！ – Nikit

幻燈片事件有兩個參數：event和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-06 18:07:50 Josh

終於有了很好的回答！我一直在尋找它。你在哪裏找到索引函數？ – Kulpemovitz

Jquery UI：範圍滑塊。哪個滑塊被移動？

回答

相關問題