bug: range input slider displays incorrectly when longer than 3235 pixel

[goswinr]

Reproduction URL (Required)

https://play.tailwindcss.com/QFCr6ZiinD?layout=horizontal

What version of daisyUI are you using?

tailwind play 4.1.17

Which browsers are you seeing the problem on?

Chrome

Describe your issue

You need a big screen to reproduce this bug !
When the slider is wider than 3235 pixel (e.g. on a 4K screen) the slider start gets trimmed off when the thumb is at the end. See screenshot from Tailwind play and https://play.tailwindcss.com/QFCr6ZiinD?layout=horizontal

<input type="range" min="0" max="100" value="40" class="range w-full" />
<!-- When this screen is wider than 3235 pixel the slider start gets trimmed off  -->

[github-actions]

Thank you @goswinr for reporting issues. It helps daisyUI a lot 💚
I'll be working on issues one by one. I will help with this one as soon as a I find a solution.
In the meantime providing more details and reproduction links would be helpful.

[saadeghi]

Valid issue 👍 …but is it actually a good idea for a range slider to be 3235px long? 😁

[goswinr]

While short sliders are good for most use case, in some use case very long sliders allow for finer adjustments. I am making a technical drawing app and want to be able to offer very fine adjustments on a large screen too.

[pdanpdan]

This can be fixed by using 100vw instead of 100rem for box-shadow: https://play.tailwindcss.com/6siYDRczaa?layout=horizontal&file=css

I'm not sure if it has any performance implications, but considering the existing 100rem was wider than a < 4K screen it should be ok.

Do you think it is probable that someone uses a range slider wider than the screen in a scrollable container?

I just realized we should go with 100cqw, it has good support (https://caniuse.com/mdn-css_types_length_container_query_length_units)

https://play.tailwindcss.com/dd14p6BSWD?layout=horizontal&file=css
improved example: https://play.tailwindcss.com/Rhb7FOGmZr?layout=horizontal

[saadeghi]

Yes 100cqw would be bulletproof.

[goswinr]

wow ! that was fast ! thank you !