Расположите ручку, где она была нажата на трек-панель

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

Override анимация CSS:

.noUi-state-tap .noUi-connect, 
.noUi-state-tap .noUi-origin { 
-webkit-transition: none; 
    transition: none; 
} 

Updated fiddle.