Slider validation casues a lot of rerender to show the error message

[Mahmoudgalalz]

Screen.Recording.2024-12-23.at.5.15.16.PM.mov

based on my inspection to this, we should be considering validation on mouse leaves, not by monitoring the value

[logaretm]

I would be willing to say this is a CSS issue, typically you would want to reserve the space for the error message beneath/next to the field to avoid layout shifts, we already do that and UI libraries also do that for their error/description slots.

This will also happen with number inputs incrementing/decrementing, so I think we should maybe do that for the inputs in the docs and add a styling tip in the styling guide.

Having a padding equal to the line height and positioning the error/description elements absolutely to fit into the padding line would solve this. We should also add a minimum width to that container.

What do you think?

[HELWATANY]

Setting a fixed width for the container will help with the size shift when the error message is displayed.

About having the error/description positioned absolutely, I would recommend having the error/description always rendered with a minimum height to avoid the hassle of positioning absolute elements

[logaretm]

Sounds reasonable, do you want to take this on? The docs live here.