Slider
A control for selecting a value or range from a track.
Overview
The MD3 slider: a 4px rail with the inactive track on secondary-container,
the active range on primary, and a 20px primary handle. The kit's state
layer becomes a circular halo around the handle — 8% on hover, 10% on keyboard
focus and drag — which doubles as the focus indicator. The touch target stays
at 44×44 even though the handle is 20px.
$ npx morpha-ui add sliderExamples
Range
Pass multiple values to render one thumb per value.
Vertical
Disabled
Installation
Morpha UI components are distributed via the Morpha CLI: npx morpha-ui add slider. In the meantime, since this is the base shadcn component, you can
also add it directly:
npx shadcn@latest add sliderAPI Reference
Prop
Type
Accessibility
- Each thumb is a
role="slider"element witharia-valuenow/ min / max, managed by the Base UI primitive. - Keyboard: Arrow keys step the value, Page Up/Down step larger, Home/End jump to the ends.
- Add
aria-label(oraria-labelledby) to every slider — one per thumb for ranges. - The 44×44 touch target meets pointer-target guidance despite the 20px visual handle.