1

noUiSlider允许您根据以下代码段创建具有多个可拖动手柄的范围滑块：

var output = $('#output');

$('#range-slider').noUiSlider({
    start: [0, 100], 
    range: {
        'min': [0],
        'max': [100]
    }
}).on('slide', function(evt) {
    // In this event handler, I want to see which of the two sliders is being moved
    // Is there a property of the 'evt' parameter which would tell me this?
    output.html($(this).val().join(' - '));
});
body { padding: 30px 30px; }
#range-slider { width: 300px; } 
#output { margin-top: 30px; }
<link href="https://cdn.rawgit.com/leongersen/noUiSlider/c8a70344bebb0b69a09adf12a1e7cc08894f8c3b/distribute/jquery.nouislider.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/leongersen/noUiSlider/c8a70344bebb0b69a09adf12a1e7cc08894f8c3b/distribute/jquery.nouislider.all.min.js"></script>

<div id="range-slider"></div>
<div id="output"></div>

在事件的事件处理程序中slide（在拖动每个滑块句柄时连续触发），我想知道当前正在移动哪个句柄。我在文档中看不到任何关于此的内容，并且evt在浏览器的开发工具中检查事件处理程序的参数会发现大量数据，但我看不到的任何数据都无法识别句柄。

我可以做一些乱七八糟的事情，比如将mousedown事件直接绑定到句柄元素并设置更高范围的变量的值，该变量可以从事件处理程序中访问以包含最后移动的句柄 ID/类......但我没有t 真的想要，特别是如果有更清洁的方法。任何人都可以帮忙吗？

4

2 回答 2

1

http://jsfiddle.net/kwj8opsq/1/

使用 evt.target 并检查 noUi-active 类

if($(evt.target).find('.noUi-handle-lower').hasClass("noUi-active")) lowerHandle=true;
if($(evt.target).find('.noUi-handle-upper').hasClass("noUi-active")) upperHandle=true;
于 2014-11-26T20:55:09.397 回答
1

此提交中引入了对此的更好处理，因此您现在将句柄索引作为事件回调参数：

$('#range-slider').noUiSlider({
    start: [0, 100], 
    range: {
        'min': [0],
        'max': [100]
    }
}).on('slide', function(values, handle, unencoded, tap, positions) {
    // 'handle' will either be 0 or 1 depending on which handle caused the event to fire
    var whichHandle = handle === 0 ? 'LEFT' : 'RIGHT';
    output.html(values.join(' - '));
});

文档中有关于其他回调参数的更多信息。

于 2016-08-16T15:50:06.720 回答