Question

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

＆＃13;

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

＆＃13;

body { padding: 30px 30px; }
#range-slider { width: 300px; } 
#output { margin-top: 30px; }

＆＃13;

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

＆＃13;

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

我可以做一些混乱的事情，比如将mousedown事件直接绑定到handle元素并设置更高范围的变量的值，可以从事件处理程序中访问该变量以包含最后移动的句柄ID /上课......但我并不是真的想要，尤其是如果那里更清洁的话。有人可以帮忙吗？

Answer 1

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

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

if($(evt.target).find('.noUi-handle-lower').hasClass("noUi-active")) lowerHandle=true;
if($(evt.target).find('.noUi-handle-upper').hasClass("noUi-active")) upperHandle=true;

Answer 2

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

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

有关the documentation中其他回调参数的更多信息。

noUiSlider：如果我有一个带两个手柄的滑块，我怎么知道哪个手柄被移动了？

2 个答案: