Primitive · CLI
Slider
Range slider with thumb press; track fill stays 1:1 while dragging.
Preview
npx shadcn@latest add @atroui/sliderIntensity
Installation
Agent blurb — install command + no npm UI rule. For agents
npx shadcn@latest add @atroui/sliderSource lands in your repo. Installation · Registry
Usage
SliderControl must be `relative` so the absolute thumb % positions against the control — not a parent like ResizablePreview. Thumb press is CSS scale only; track fill stays 1:1 with the pointer.
tsx
import {
Slider,
SliderControl,
SliderIndicator,
SliderLabel,
SliderThumb,
SliderTrack,
SliderValue,
} from "@/components/ui/slider"
<Slider defaultValue={40}>
<div className="flex items-center justify-between gap-2">
<SliderLabel>Intensity</SliderLabel>
<SliderValue />
</div>
<SliderControl>
<SliderTrack>
<SliderIndicator />
</SliderTrack>
<SliderThumb />
</SliderControl>
</Slider>Slider