Slider component with min/max

[syska]

For e-commerce sites that use faceted search a range slider component with min/max is often used.

The slider component is already here: https://daisyui.com/components/range/

I'm a backend person, which is also the reason why I use something like daysiui. Styling is something I don't have in my skill set.

Is that someone that is on the roadmap? I have no idea how hard it would be to reuse things from the range component.

[saadeghi]

Sadly that's not possible with native HTML elements and a CSS library can't give you something similar.
Every example you see on the web is using JS and multiple divs or spans to simulate a range slider. So I think you should use one of those libraries for that.

https://user-images.githubusercontent.com/7342023/157743594-8c4b3c73-7d40-4be3-b6c1-7dacd90291ab.mp4

There are many packages you can find:

• https://www.npmjs.com/search?q=range%20slider
• https://codepen.io/search/pens?q=range+slider
• also, some React / Vue component libraries have this. You can only import that one component and use it

[syska]

@saadeghi

Wow, quick answer, thanks.

Just wanted to make sure it was not missing. I will take a look at some of the custom components out there.

Now it's in the issue list so others can see why it's not created and the reasons behind. Which makes total sense.

[ivan-kleshnin]

Every example you see on the web is using JS and multiple divs or spans to simulate a range slider. So I think you should use one of those libraries for that.

There's an approach where you position two native range inputs on top of each other. It requires JS and is tricky to implement with good UX though.

https://pauljadam.com/demos/multithumb-slider.html