在轨迹栏上单击的位置手柄

Question

我正在为一个项目使用出色的 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/

非常感谢所有帮助！

Answer 1

使用滑块的事件来监听变化而不是只捕获 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;
}

Updated fiddle.

在轨迹栏上单击的位置手柄

Position handle where it has been clicked on the trackbar

javascript

jquery

slider

nouislider