Slider

Example usage

Slider is a component that displays a slider bar, starts from the left side with a min value. You can also display the sliding value above the thumb position by specifying a label type. Leading and trailing icon slots allow you to pass in an icon/button to create a touchable control for your slider. If neither is set for leadingSlotConfig or trailingSlotConfig, the respective element won't be touchable.

<Slider
    labelType="percentage"
    secondaryLabel="Volume"
    value={volume}
    onChange={setVolume}
    leadingSlotConfig={ {
        icon: 'ic_volume_low',
        onPress: () => {}
    } }
    trailingSlotConfig={ {
        icon: 'ic_volume_high',
        onPress: () => {}
    } }
/>

Props

Example

Quantity sliders

Dimensions

Accessibility

The slider is a non-standard control — there's no native HTML element for it — so every one of these behaviors has to be built deliberately rather than inherited for free the way a checkbox or a native range input gets them.

Labeling & screen reader output

The track carries role="slider" with aria-valuemin, aria-valuemax, and aria-valuenow kept in sync on every change — that's what lets VoiceOver or TalkBack announce a current value at all. When the raw number isn't meaningful on its own (a day of the week, a named level), pair it with aria-valuetext so the announcement speaks the label a sighted user sees, not just the underlying integer. The Label building block (H) should be wired in as aria-labelledby rather than left purely visual, so the control announces what it controls before it announces its value.

Keyboard interaction

Focus lands on the Thumb Control itself, not the track — same as dragging, the keyboard should move the value, never the page scroll position. The end icons (A, E), when present, are separate stops in the tab order after the thumb, each behaving like a button rather than part of the slider's own key handling.

Touch targets & the segmented variant

The visible 20dp thumb (redline #3, Specification tab) is well under a comfortable touch target on its own — the actual hit area needs to extend beyond the painted circle so a fingertip doesn't have to land pixel-perfectly on it. On the Segmented Slider, each notch is a discrete stop rather than a point on a continuous scale, so its hit area should be sized and spaced the same way a row of small buttons would be — not left as thin as the visual tick mark drawn on the track.

Motion & state

The Press State (F) is a visual cue for sighted users tracking the drag — it carries no meaning on its own for a screen reader user, whose feedback comes entirely from the live aria-valuenow/aria-valuetext updates instead. Value changes should be announced as they happen during a drag, not batched into a single announcement on release, so a screen reader user gets the same continuous feedback a sighted user gets from watching the fill grow.