Feature Request: Double Range Slider with Colored Fill Between Thumbs

[ShoyebWritesCode]

Hello,
I would like to request the addition of a double range slider component that includes the following features:

Two Thumbs: The slider should have two thumbs, one for selecting the minimum value and one for the maximum value.
Colored Fill: The space between the two thumbs should be filled with a color to visually indicate the selected range.
Default Values: The default values for the thumbs should be set to a minimum and a maximum, but they should be adjustable by the user.

[saadeghi]

It's it possible with CSS? Because daisyUI is a Tailwind CSS plugin. Everything is class names and we don't provide a JS script file.

[ShoyebWritesCode]

Thanks for the clarification

[patleb]

It's possible, but not for the min/max management. I don't see this as a huge problem since it could be dealt with on the backend by just sorting the 2 values received.
There's a video on how to go about it in css only: https://www.youtube.com/watch?v=PHjqS3ft1Yg
The first 3 minutes is all you need to watch.

[saadeghi]

@patleb Another challenge is, highlighting the selected range (between min and max) which is not in this video and needs JS.

[patleb]

Not necessarily, you could keep one range with lower values highlighted and one range with upper values highlighted (or vice versa), so that the intersection is visually there (if you don't reverse the selection). But, as I said, you won't be able to manage how the lower/upper values relative to the min/max behave in CSS. So, it's actually possible to have a double range slider in CSS only and still have a coherent selection, but you'll have to differentiate between the lower/upper values on the backend or in JS.

It's not exactly great or the perfect solution, but if all you have is CSS, then this is what's available to solve this problem.