leongersen / noUiSlider

noUiSlider is a lightweight, ARIA-accessible JavaScript range slider with multi-touch and keyboard support. It is fully GPU animated: no reflows, so it is fast; even on older devices. It also fits wonderfully in responsive designs and has no dependencies.
https://refreshless.com/nouislider/
MIT License
5.7k stars 657 forks source link

Pip feature #1216

Closed HerrSammyDE closed 2 years ago

HerrSammyDE commented 2 years ago

Hey,

is it possible to set some kind of active class on a pip that has just been selected?

Here is an example: chrome_zeOCQQnzFO

leongersen commented 2 years ago

Hi!

Not as a build in feature, but you can do this using the event system.

You can do something like this (I'm on mobile so the example isn't complete):

slider.noUiSlider.on('update', function(values, handle) {
    // (remove active class from current active handle)
    // (format value, handle querySelector)
    document.querySelector('.noUi-value[data-value="'+ values[handle] +'"]).classList.add('active');
});
HerrSammyDE commented 2 years ago

Thanks! Would you perhaps have a direct example where this works?

leongersen commented 2 years ago

Yeah! I've added this (and #1215) as an example to the documentation:

Interacting with pips.

github-actions[bot] commented 2 years ago

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.