[Feature Request]: Slider component enhancement: number range.

[KevinCamelo]

Summary

We're seeking development assistance to enhance Carbon's slider component to support range inputs.

The number range enhancement to Slider would be a useful tool for when users need to filter down data between a specific range of numbers. This would be an enhancement of the current slider component, which only accepts single number inputs instead of a range of values.

Designed flow:

Justification

Our users have reached out with a business need to be able to provide their clients the ability to sort through a range of values within a data table. Since this is an extension on top of Slider's current offering, we are reaching out for development assistance.

Desired UX and success metrics

The number range enhancement to Slider will provide a visual indication of adjustable content, where the user can increase or decrease a range of values by moving two handles along a horizontal track.

Success metrics:

• Users should be able to identify the ability to select a range from a set of numbers with a specific lower and upper limit.

• Warn users when their text input exceeds the specified lower or upper limit in the number input fields with an error or warning state.

Identify Range	Error State	Warning State

Required functionality

As seen in the current Slider component:

Users can choose a numerical value by:

• Entering the exact value into the text field.
• Moving the slider handle with their mouse, which automatically updates the value in the text input.
• Using the ↑ ↓ ← → arrow keys automatically updates the value in the text input and moves the slider handle to the corresponding value.
• The step size increment is how many increments the inputted value and slider handle will jump when using the arrow keys. Make sure to set the step size increments to reasonable values.
• ↑ ↓ ← → changes the value by one step size increment. Example: Pressing → changes the inputted value from 59 to 60, increasing the value by 1 unit.
• Shift + ↑ ↓ ← → changes the value by 10 step size increments. Example: Typing Shift + → changes the value from 60 to 70, increasing the inputted value by 10 units.

Specific timeline issues / requests

One of our users is looking to implement this component by February 2022.

Available extra resources

Design resources: our team can create usage and style templates, create additional guidance, and help bring this to life!

Code of Conduct

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

[tay1orjones]

Hi @KevinCamelo! Good news - It looks like this idea has been proposed before in #6337, and was accepted!

This #6337 (comment) on that issue is a good indicator of it's status:

I'm not aware of any dev/design efforts for this enhancement. I think "generally wanted but open for help" fits the bill, we see the value but don't have any current plans to implement. If your team has any extra bandwidth to contribute an enhancement for this, we'd be happy to work with you to get it in 👍

cc @carbon-design-system/design

[KevinCamelo]

@tay1orjones Thank you for the response, @tay1orjones. Would love to see if it could get revisited by Carbon, especially since it seems multiple teams have created one off solutions for range.

For my exploration, I tried to make it so it doesn't divert far away from what Slider currently offers.

I've added a comment on #6337 with my thoughts. Thank you!

[abbeyhrt]

Hey @KevinCamelo! Would you mind if we close this issue in favor of #6337?

[KevinCamelo]

@abbeyhrt Hey Abbey! Yes, I'll go ahead and close the issue. Jan and I are working together to contribute this back to Carbon.

[akanshag26]

Can someone please let me know if this feature is implemented?