[Enhancement]: expose onBlur event from input in Slider

Summary

if anything, we would also like to be able to listen to the blur event for the input in slider.

Our use case: There are 2 sliders A and B. A determines the upper bound of B, while B determines the lower bound of A.

Show me the code: https://codesandbox.io/s/optimistic-pateu-1by45?file=/src/index.js

Imagine this scenario: A is 50, B is 70. when user sets ‘90’ on A by typing on the text box, onChange is called when ‘9’ is pressed and it immediately sets the B to 9 because B exceeds the new ‘upper bound’ which is ‘9’, but it’s executed prematurely. Adding a debounce/delay from consumer side would relieve some cases but it’s not a right fix IMHO. All is good when user drags the handle.

onBlur could solve this problem, because that’s when user is satisfied with the number and move on to next item

This is somewhat connected to https://github.com/carbon-design-system/carbon/issues/9898

Justification

We are implementing a double sliders for thresholds for a ML based business term/data class assignment and suggestion.

The first one being the threshold a model will assign the term to an asset. the second one is the threshold a model will list the term as suggestion, but not assigned.

If the confidence score of term X exceeds threshold A, then the term/data class would be assigned directly without user action. e.g s > A > B If the confidence score of term Y is between threshold A and B, then it will be added to a list for user to review later. e.g A > s > B

Desired UX and success metrics

No response

Required functionality

onBlur should can be called with the latest value

Specific timeline issues / requests

No response

Available extra resources

No response

Code of Conduct

• I agree to follow this project’s Code of Conduct

[nelsonchen90]

@tay1orjones the codesandbox example is almost the same as our implementation. And you are right, we are working with two sliders, not dual handles in a single one because we are setting two distinct values instead of a range, although these two values does have constraint on each other.

[tay1orjones]

@nelsonchen90 Yeah we can backport the fix delivered in https://github.com/carbon-design-system/carbon/pull/11348 to v10