Inconsistent slider thumb position with controlled slider state

[JAD3N]

Description

When using a controlled slider if the slider value does not change when using the onValueChange callback the thumb will not revert back to the position of it's set value.

For example if the value is set to 0, and you drag the slider to 50 but the onValueChange callback decides that the value should not have changed the slider will stay at 50 instead of reverting back to 0.

Link to Reproduction

https://stackblitz.com/edit/chakra-ui-v3-jm7hd4ud?file=src%2FApp.tsx

Steps to reproduce

1. Go to reproduction.
2. If you drag the slider to positions and let go it will have an 80% chance of being ignored (for test purposes), do this multiple times if necessary until the value doesn't match the position of the slider.
3. Notice the value being shown will not match the value for the slider (only if the change callback doesn't trigger any updates).
4. When the value doesn't match you can then press the update button which will force an update which will fix the slider.

Chakra UI Version

3

Browser

Chromium 131

Operating System

• macOS
• Windows
• Linux

Additional Information

For me the only workaround was either to forcibly update the state after the callback or to use useSlider and replicate the slider snippet.

[segunadebayo]

Transferred to ark, where it'll be fixed.

For now, we recommend setting the state in the onValueChange callback