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

在轨道栏上点击位置的句柄

1 个答案: