我正在为项目使用出色的noUiSlider（https://refreshless.com/nouislider/）。我需要进行设置，以便在第一次查看滑块时，它根本不会包含手柄，在单击轨迹栏时，手柄会显示在已单击的位置。
隐藏的手柄的显示有效，但是如何使显示的手柄与用户单击的位置相同？现在，手柄出现并从起始位置滑出。因此，我需要将开始位置与用户单击的位置相同。到目前为止，这是我的JS：
$(document).ready(function() {
var slider = document.getElementById('slider-vas-vertical-2');
noUiSlider.create(slider, {
start: [0],
orientation: 'vertical',
direction: 'rtl',
range: {
'min': [0],
'max': [100]
},
pips: {
mode: 'values',
values: [0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100],
density: 0
}
});
$('.vas-slider .noUi-base').on('click', handleSliderClick);
function handleSliderClick() {
var selected_slider = $(this).closest(".vas-slider").attr('id');
var sliderHandle = $("#" + selected_slider).find('.noUi-base .noUi-handle');
$(sliderHandle).show();
}
});
我做了一个JSFiddle，所以您可以看到到目前为止的内容：https ://jsfiddle.net/nf34ymty/2/
所有帮助，不胜感激！
使用滑块的事件来监听更改，而不是仅捕获click事件：
slider.noUiSlider.on('change', function(){
$(slider.querySelector('.noUi-handle')).show();
});
覆盖动画CSS：
.noUi-state-tap .noUi-connect,
.noUi-state-tap .noUi-origin {
-webkit-transition: none;
transition: none;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句