Package
@carbon/react
Browser
No response
Package version
1.101.0
React version
No response
Description
After upgrading to the latest Carbon version (1.51.0 -> 1.101.0), the Slider component shows inconsistent behavior when displaying its invalid state.
When the user enters an invalid value directly into the input field, the component correctly shows the invalid message, red border, and error icon—and these remain visible as long as the value is invalid.
However, when the value is changed by dragging the slider thumb (triggered on onMouseUp), the invalid message disappears and the input visually returns to a “valid” state, even though the value is still outside the allowed range and should remain invalid.
This results in the component visually showing a valid state while the underlying validation has still failed.
This appears to be a regression introduced after the version upgrade.
Reproduction/example
https://stackblitz.com/edit/github-zwkgybou?file=src%2FApp.jsx&preset=node=
Steps to reproduce
Render a Carbon Slider component with a defined min, max, and invalid/invalidText logic.
Enter a value outside the allowed range manually in the input field.
Result: Invalid message + red border + error icon appear and persist (expected).
Now drag the slider thumb so that the value is still outside the valid range, releasing the mouse (onMouseUp).
Result:
Invalid message disappears (unexpected)
Red border and error state are removed (unexpected)
Value remains invalid but component appears valid
Suggested Severity
None
Application/PAL
No response
Code of Conduct
Package
@carbon/react
Browser
No response
Package version
1.101.0
React version
No response
Description
After upgrading to the latest Carbon version (1.51.0 -> 1.101.0), the Slider component shows inconsistent behavior when displaying its invalid state.
When the user enters an invalid value directly into the input field, the component correctly shows the invalid message, red border, and error icon—and these remain visible as long as the value is invalid.
However, when the value is changed by dragging the slider thumb (triggered on onMouseUp), the invalid message disappears and the input visually returns to a “valid” state, even though the value is still outside the allowed range and should remain invalid.
This results in the component visually showing a valid state while the underlying validation has still failed.
This appears to be a regression introduced after the version upgrade.
Reproduction/example
https://stackblitz.com/edit/github-zwkgybou?file=src%2FApp.jsx&preset=node=
Steps to reproduce
Render a Carbon Slider component with a defined min, max, and invalid/invalidText logic.
Enter a value outside the allowed range manually in the input field.
Result: Invalid message + red border + error icon appear and persist (expected).
Now drag the slider thumb so that the value is still outside the valid range, releasing the mouse (onMouseUp).
Result:
Invalid message disappears (unexpected)
Red border and error state are removed (unexpected)
Value remains invalid but component appears valid
Suggested Severity
None
Application/PAL
No response
Code of Conduct