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：范围滑块。哪个滑块被移动？

回答

相关问题