Slider | Glaze design system

Thumbs

When to use it

Use: A number where the rough place matters more than the exact digit: temperature, a threshold, a budget.
Use: A range between two bounds (two thumbs).
Not for: The exact number matters, like a token limit or a price. 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 0.7 from 0.8, 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 "$50" and not "50".
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: Put the button's glass on the thumb or range, or grow the thumb on hover; both are small glaze (glaze-sm, the range run along the bar with glaze-sm-x). Because the button's glass scaled to 16px smears its catch-light into a smudge, and a growing thumb shifts under the pointer; the wash ring 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 thumb is ink, 20:1 on paper, ringed in paper so it reads over the range; the track is ink at 10%, the range ink.
: Focus is the 2px ink ring on the thumb.
: The wash ring widens the target to 28px without moving the thumb.

3 keys

6 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.
Dark theme: The thumb and range turn light ink; the ring takes the dark paper.
Forced colors: The range is Highlight and the thumb CanvasText.

6 props

16 tokens