Slider
A draggable control for picking a numeric value or range, such as autoscaling limits.
Autoscaling range2–10 replicas
Install
pnpm dlx shadcn@latest add @namche/sliderUsage
import { Slider } from '@/components/ui/slider';
const [replicas, setReplicas] = useState([2, 10]);
<Slider
value={replicas}
min={1}
max={32}
onValueChange={(value) => setReplicas(value as number[])}
/>Built on Base UI's Slider, defaulting to min={0} / max={100}. Passing a
two-element array to value/defaultValue renders two thumbs and a filled
range between them — useful for a min/max autoscaling bound, as above.
Passing a single-element array (or omitting value) renders one thumb from
min. The number of thumbs rendered is derived from the length of
value/defaultValue at mount, so keep the array length stable.