Slider
Fluid range control with spring motion on the track, fill, and thumb. Optional label and value readout. Framer Motion.
Live preview
Nudge the line until it hums — spring-settled, thumb and fill in quiet agreement — one gesture, no sharp edges.
Install
v0
Ship the registry bundle to v0 and iterate on motion or layout with prompts.
Usage
Named export Slider— use controlled value / onChange or uncontrolled defaultValue. See tile 05 for API detail.
import { Slider } from "@/components/ui/slider";
import { useState } from "react";
export function BrightnessRow() {
const [value, setValue] = useState(50);
return (
<Slider
label="Brightness"
value={value}
onChange={setValue}
min={0}
max={100}
/>
);
}
export function ExposureUncontrolled() {
return (
<Slider
defaultValue={30}
label="Exposure"
max={200}
min={0}
step={5}
/>
);
}Dependencies
Registry peers and how this component fits your app.
value / defaultValue
Controlled mode: pass value with onChange. Uncontrolled: pass defaultValue only. Internal state mirrors defaultValue when uncontrolled.
min, max, step
Numeric range and stepping for the thumb position. Progress is mapped linearly across the track width; values are clamped to [min, max].
label, showValue
Optional label on the left and a motion-driven numeric readout on the right. Set showValue to false to hide the number only.
framer-motion
Spring animation on fill width, thumb position, track height on hover/drag, and the displayed value. Pointer capture handles drag smoothly.
shadcn registry
Peer dependency framer-motion is declared on the registry item so shadcn add can install it when needed.