Components
Slider
An input where the user selects a value from within a given range. Drag a thumb along the track — use one thumb for a single value or two for a range, on either axis.
Preview
Rendered with live Cognition tokens — the track, range fill, and thumb remap on theme change, no dark: classes. Drag the thumb to update the value.
Variants
<Slider defaultValue={[50]} max={100} step={1} /><Slider defaultValue={[25, 75]} max={100} step={1} /><Slider
defaultValue={[50]}
orientation="vertical"
className="h-44"
/><Slider defaultValue={[40]} max={100} step={10} />One thumb selects a value; two select a range. Set orientation="vertical" (with a height) to stand it up, and step to snap to coarser increments.
States
<Slider defaultValue={[50]} max={100} step={1} /><Slider defaultValue={[40]} disabled />The default slider is draggable and keyboard accessible (arrow keys move by step). A disabled slider dims to 50% and stops responding.
API
Don't and Do
Don't use a slider when the exact value matters — a precise number is better typed into an Input. And don't hide the selected value; show it nearby so the user knows where they've landed.
<Slider
value={value}
onValueChange={setValue}
max={100}
step={1}
/>import { Slider } from "@/components/ui/slider";
export function VolumeSlider() {
const [value, setValue] = useState([50]);
return (
<Slider value={value} onValueChange={setValue} max={100} step={1} />
);
}