Component

Slider

An input where the user selects a value from within a given range.

SliderdefaultValue · value/onValueChange · min · max · step

orientationhorizontal (default) · vertical

Playground

Range (two thumbs)— range

Disabled— disabled

single value — defaultValue={[75]}

defaultValue={[25, 50]} step={5}

defaultValue={[10, 20, 70]} step={10}

Opacity0.5

non-interactive

5 semantic tokens consumed by this component.

--primaryPrimary

bg-primarytext-primaryborder-primaryring-primary

--mutedMuted

bg-mutedtext-mutedborder-muted

--backgroundBackground

bg-background

--ringRing

ring-ringring

--borderBorder

border-borderborder