[Slider] Slider with Increment proposal

[fangshih]

I am submitting a ...

• [x] Feature request
• [ ] Design defect
• [ ] Source code defect
• [ ] Demo/documentation defect
• [x] Other (design proposal)

Summary

An additional pattern for Slider

This pattern displays incremental marks in the slider for options available to the user. The display for the slider’s current value is not a text input and therefore cannot be edited by directly clicking on it.

Overview: 

"Slider with Increment" is useful for users who need to select a specific value or when the values offered are not intuitive or predictable. The incremental marks help them identify at a glance how many options are available to them, while the current value display informs them of their current selection. The value display is not editable to prevent the user from typing in nonexistent values that they may infer are options.

Screens

1. Labels: Labels inform the user of the slider's purpose
2. Increments: All options available in the slider are shown visually as evenly spaced marks
3. Value: The selected value is displayed in text, along with units if appropriate

When to use

Use this pattern when:

1. Sliders lack an intuitive range of values, such as values that do not progress linearly (ie incremental values of 4, 16, 32, and 64).
2. Multiple sliders appear next to each other, but offer a radically different amount of options or step values

Designing with Slider with Increment

This slider largely appears and functions like the basic slider component, with the smallest value on the left and the largest on the right. Users can click and drag the handle to snap to available increments, as delineated in the marks. The mark of a value lower than the current selection assumes the black color of the handle. 

Behaviors

Similar to the basic slider's disabled state, "Slider with Increment" can be disabled when the user filters it out or otherwise chooses not to view or interact with it.

Best practices

Do not -

• Do not use the Slider with Increments if there are too many increments. it is recommended sliders do not contain more than 25 increments.

• Do not use in combination with the basic slider on the same page. The inconsistencies when next to each other may cause confusion. Instead, determine which slider component best represents your goals and stick with one.

Do

• It is recommended a Slider with Increment is only disabled if the user turns them off or otherwise chooses not to view it. Disabled states are not required to meet color contrast standards, and are therefore not considered readable in the Slider with Increments when used.

• If the slider needs to be disabled, but it is important for the user to be able to know the value she selected, ensure there is an alternate way to view the selected value, such as in text in another place on the screen. 

Visual guidance

Slider with increment normal state

Slider with increment disable state

Slider with increment visual spec

Accessibility 

Similar to the slider component:

• Moving the slider handle with their mouse, which automatically updates the value in the text.
• Using the ↑ ↓ ← → arrow keys moves the slider handle to the corresponding value and automatically updates the corresponding value in the text.
• We recommend not using the step size increment (how many increments the slider handle will jump when using the arrow keys) as every increment needs to be accessible through the use of a keyboard. 
• If the slider needs to be disabled, but it is important for the user to be able to know the value she selected, ensure there is an alternate way to view the selected value, such as in text in another place on the screen. 

Related component

Slider

Specific timeline

March

[jnm2377]

Tentatively accepting, but need a designer to review for sure. :) cc: @laurenmrice

[tomlroach]

Exploring this a little further. One requirement which I think comes together with increments is non-numeric values. For example a slider where the values are Low, Medium, and High or something like that.

We've found some issues with those kinds of sliders as the positions of the labels at either end make the offsets a bit weird, for example, see the image below where the "low" and the "minimal" mean the sliders start in different places.

It also suggests we may want a different type of input/display for the currently selected value - for example a dropdown, vs a text/number input.

Here's a sample use case - I recognise there is an argument to be made that these sliders could be replaced with dropdowns, but there are cases when it makes sense, for example if the rest of the settings on the page are sliders.

Maybe something like this could solve some of these issues by moving the labels below the slider

And then this is pretty niche, but we've also been exploring use cases with status indicators.

[mbgower]

This is relevant to my discussion on the purpose of a slider without an input https://github.com/carbon-design-system/carbon/discussions/11581