Slider | Sodium design system

Thumbs

When to use it

Use: A number where the rough place matters more than the exact digit: workers, a retry backoff, a sample rate.
Use: A range between two bounds (two thumbs), such as autoscaling's minimum and maximum.
Not for: The exact number matters, like a row limit or a port. Use Input.
Not for: A handful of named steps. Use Segmented control.

6 rules

Must: Set showValue, or show the value elsewhere, whenever the number itself matters. Because a thumb's place on a 200px track cannot tell 16 from 17, and the read-out reserves its width so the track never shifts.
Must: Format units through format, never by appending text to the read-out. Because format feeds the read-out and aria-valuetext, so a screen reader hears "25%" and not "0.25".
Must: Name each thumb of a range with thumbLabels. Because two unnamed thumbs are both announced with the field's label, so a screen reader cannot tell the low end from the high.
Never: Round the thumb, colour the range yellow in light, or grow the thumb on hover. Because every corner is square, a yellow range on white is 1.4:1, and a growing thumb shifts under the pointer; the square wash shows hover instead.
Should: Pick a step the person can feel: about 20 to 100 stops across the track. Because a step of 1 across 0 to 10,000 makes every pixel a different value and the arrow keys useless.
Should: Put a Slider in a Field with a FieldLabel, and say what the value does in FieldDescription.

5 states, highest first

4 checks

: Each thumb is a slider with aria-valuenow and aria-valuetext from format, named by the Field label or thumbLabels.
: The range is dark gold, 5.6:1 on the well, and the thumb yellow with a gold edge, lit from below, in light; in dark the range is yellow and the thumb the yellow-edged tint.
: Focus is the 2px --focus ring on the thumb.
: The square wash widens the target to 28px without moving the thumb.

3 keys

5 edge cases

Value crosses a digit, 9 to 10: The read-out reserved the widest value, so the track does not shift.
Fractional step: The reserve checks one step in from each end, where 9.5 is wider than 10.
Range thumbs meet: They stop at each other; the later one in DOM order sits on top.
Right to left: The range fills from the right and the arrow keys follow.
Forced colors: The range is Highlight and the thumb CanvasText, unlit.

6 props

14 tokens