Slider
An input for choosing a value from a range. The thumb swells slightly when grabbed, so touch targets feel tactile.
tsx
import { Slider } from "@/registry/seam/ui/slider"
export default function SliderDemo() {
return (
<div className="w-full max-w-xs">
<Slider defaultValue={50} max={100} step={1} />
</div>
)
}bunx --bun @seamui/cli@latest add sliderNotes
- On press/drag the thumb rises to
depth.raised— a physical “grab” cue that settles on release (most controls recede; the slider thumb lifts). - Controlled via
value/onValueChange, uncontrolled viadefaultValue; keyboard supports arrows plus Home/End.
Press feedback, reduced motion, and haptics follow the global policy — see Motion and Haptics.