[Feature Request]: 4 handle slider

[ayman3011]

The problem

The current Carbon Slider component allows the user to change a single value. In other cases such as with setting multiple thresholds at once, this is not possible. The only current solution to this is to repeat the slider a number of times depending on how many thresholds the user would need to configure. Even with that, the problem is each threshold would need 2 values to decide on the threshold range (i.e. the minimum value and the maximum value). While I understand there is a 2 values slider being developed, the use case I have is the user would need to set up 4 different thresholds (Low, Medium, High, and Creitical).

The solution

To offer multiple threshold configurations in the same pattern/component, where the user would use a slide handler to drag it right or left to set the maximum value for the lower threshold which is the same minimum value for the higher threshold.

So for example, If I have 4 thresholds (Low, Medium, High, and Critical) I would have 3 handlers, one between each 2 thresholds. By dragging the handlers (one at a time), the user would be able to configure all of the thresholds in the same pattern.

The overall threshold is based on a percentage from 0% to 100% with 5% step intervals, however, this is not mandatory.

Examples

The last example of this page:
https://developergovindgupta.github.io/multi-range-slider-react-ts/

Application/PAL

IBM Security Guardium Insights

Business priority

Medium Priority = upcoming release but is not pressing

Available extra resources

I would be more than happy to provide any necessary help around implementing it into Carbon's Figma libraries.

Code of Conduct

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

[t-trafer]

Hey, i would like to work on this issue

[tay1orjones]

@ayman3011 Thanks for proposing this idea! Could you outline the anticipated use case a bit more as well as the reusability of this pattern, specifically:

• How many teams/projects do you anticipate will use this?
• Have you explored alternative design options to provide the user this configurability of multiple thresholds?

With this info, we as a team can look at this and determine if this pattern is scalable, and also provide a design spec to implement against. If you're interested, a good way to get some momentum behind this would be to attend the designer office hours and discuss this proposal with the team.

[tay1orjones]

Related: #7581

[ayman3011]

@ayman3011 Thanks for proposing this idea! Could you outline the anticipated use case a bit more as well as the reusability of this pattern, specifically:

• How many teams/projects do you anticipate will use this?
• Have you explored alternative design options to provide the user this configurability of multiple thresholds?

With this info, we as a team can look at this and determine if this pattern is scalable, and also provide a design spec to implement against. If you're interested, a good way to get some momentum behind this would be to attend the designer office hours and discuss this proposal with the team.

Thank you so much @tay1orjones Sure here are my answers:

How many teams/projects do you anticipate will use this?
I know that our team "IBM Guardium Insights" Design Team needs it for a story we're currently working on. I also know another team within IBM Security Design org is also looking for a similar solution. I can get in touch with that other team and get more info, if that is necessary.

Have you explored alternative design options to provide the user this configurability of multiple thresholds?
Yes I have explored other ways to provide that including multiple numeric boxes. You may take a look at those exploration and more at the following Figma file. Basically, please look at all of the proposed flows in that Figma page.

I'd be more than happy to join the Designer Office Hours next week to discuss this further.

Thank you so much! Really appreciate it a lot :)

[laurenmrice]

Hi @ayman3011. Thank you for showing interest in contributing and providing more details about your use case. After discussing with other designers on the Carbon team, we feel the the four-handle slider would be better suited to live at the PAL level for Security rather than being in Carbon core, mainly because it seems very product-specific and not as common of a pattern used by other products.