Slider

Composition preview

Try Slider alongside its related selection components. These examples keep all actions local.

Usage

import { Slider } from "@/components/ui/slider";

<>
<Slider aria-label="Volume" defaultValue={[50]} min={0} max={100} step={1} />
</>

Composition recipe. Supply application state, handlers and persistence in the owning product component. Inspect the installed source before extending its API.

API & composition

value/defaultValue arrays, onValueChange, min, max, step, disabled

Usage & accessibility

Name every thumb and show the current value as text.

Implementation contract

src/components/ui/slider.tsx

Use named variants and semantic theme tokens. Preserve existing input values, refs, focus and cancellation behavior. Verify keyboard, narrow layouts and pending/error states when behavior changes.