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.

[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.

[danilo-znamerovszkij]

I ran into this exact problem recently. I agree with the limitation here, a real dual range (min/max with a filled track between thumbs) can’t be done properly with CSS alone. You can fake parts of it, but once you need correct ordering, clamping, and a reliable selected range, JS is unavoidable.

Rather than trying to push this into DaisyUI, I ended up building a small wrapper around noUiSlider and just styled it using DaisyUI’s CSS variables so it visually matches the design system.

Not suggesting this belongs in core DaisyUI at all, just sharing an approach that worked well for me:

https://danilo-znamerovszkij.github.io/daisy-dual-range/
https://github.com/danilo-znamerovszkij/daisy-dual-range/

[pdanpdan]

You can check here: #4304