Question: Broken line and labels at stops?

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.64k stars 658 forks source link

Question: Broken line and labels at stops? #1185

Closed svdtz closed 2 years ago

svdtz commented 2 years ago

We are trying to build the following:

It seems we can get the restyling and colors, but the PIPS don't quite seem to work for us. Is there any advice to get:

a broken line with stops
labels at those stops

Any advice is welcomed

Thx a lot

leongersen commented 2 years ago

Sorry, I forgot to respond to this. This type of design isn't super easy to realize within noUiSlider, as it uses transforms to scale the connecting element between the handles.

Best bet is using the pips feature for the labels and moving .noUi-pips into .noUi-base (because of z-indexing). See #1179. You can style the pips to be white, and set the z-index between .noUi-connect and .noUi-origin.

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.