Proof of concept dual thumb range

[pdanpdan]

For the moment only works in chrome (+derivatives) while reusing the daisyUI styles for range.

https://play.tailwindcss.com/b4kZmHKQGu?file=css

For firefox and safari it would need:

• small JS to set range-val-1 and range-val-2 to percent position of the thumbs (no support for view-timeline)
• to fix the range display

[saadeghi]

That's amazing. Thanks for the code 🔥🔥

However I think we should wait for the Firefox support.

Currently, without JS, it wouldn't be functional on some browser and there's no workaround except using JS but if JS is needed for that, then what's the point of using a CSS only method and adding it to a CSS library.

We can add it as soon as Firefox supports it.

It was ok that you used features like if() for scroll gutter even though Firefox and Safari don't support it, because having or not having scrollbar doesn't break the functionality of websites, it would only cause a small layout shift on some operating systems which is not unacceptable. But here, a component would not be functional on the unsupported browsers.

[pdanpdan]

Yes, I agree.

[pdanpdan]

Some improvements: https://play.tailwindcss.com/vpnXElHzzM?file=css

• show range in firefox based on css variables set on range-dual
• add example JS for testing

Problems in firefox:

• needs JS
• z-index of the thumbs (something is strange there)
• counters not working (need to check)

Problems in safari:

• counters not working (need to check)