search

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.66k stars 659 forks source link

Some styling questions #1162

Closed zetashift closed 2 years ago

zetashift commented 2 years ago

Hiya! You made an awesome library!

I was wondering if it's possible to override the handles styling, so that it's just a simple image(an .svg in my case), I'm not sure how to achieve this tho, do you have any tips?

And I was wondering how to bolden the text of a pip when the handle is set on that value, is this possible?

leongersen commented 2 years ago

For the handle image, it is probably easiest to set a background-image to .noUi-handle.

As for the pips: the behavior you describe isn't built-in, but you can do this with an update event, something along these lines:

slider.noUiSlider.on('update', function(values, handle) {
    this.target.querySelector('.noUi-value[data-value="' + values[handle] + '"]'); // add a class or set a style
});
zetashift commented 2 years ago

Ah thank you!

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.