Position Handle, wo es auf die Trackbar geklickt wurde

Question

Ich verwende die ausgezeichnete noUiSlider() für ein Projekt. Ich muss es so einrichten, dass beim ersten Anzeigen des Schiebereglers der Griff überhaupt nicht enthalten ist. Wenn Sie auf die Trackleiste klicken, erscheint der Griff in der Position, auf die geklickt wurde.

Die Anzeige des ausgeblendeten Handles funktioniert, aber wie kann ich es so machen, dass das erscheinende Handle an derselben Stelle positioniert wird, auf die der Benutzer geklickt hat? Gerade jetzt erscheint der Griff und kommt aus der Startposition rutschen. Also muss die Startposition dieselbe sein wie der Benutzer, auf den geklickt wurde. Dies ist so weit mein 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(); 
    } 
}); 

ich eine JSFiddle gemacht, so können Sie sehen, was ich habe, so weit: https://jsfiddle.net/nf34ymty/2/

All Hilfe sehr zu schätzen!

Answer 1

Verwenden der Veranstaltung Schieber für den Wechsel zu hören, statt nur die click Ereignis einzufangen:

slider.noUiSlider.on('change', function(){ 
    $(slider.querySelector('.noUi-handle')).show(); 
}); 

Aufschalten der Animation CSS:

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

Updated fiddle.