Components
Slider
A range slider for selecting a value.
Slider is built on the Base UI Slider primitive. It renders a range input for selecting a numeric value between a minimum and maximum.
Installation
pnpm dlx shadcn@latest add https://faber-ui.vercel.app/r/slider.jsonUsage
import { Slider } from "@/components/ui/slider";
export default function Example() {
return <Slider defaultValue={[50]} max={100} step={1} />;
}Examples
Default
Range
API
Each part forwards every prop of what it is built on, including className and render where Base UI supports it. The props column lists only what Faber UI adds on top.
| Part | Built on | Props |
|---|---|---|
Sliderdata-slot="slider" | Slider.RootBase UI | — |
Changelog
- v0.3.0Slider renders a single thumb when value or defaultValue is a number.patch
- v0.3.0Slider thumb is a solid circle at every radius preset, filled with foreground in dark mode instead of rendering as a dark hollow square.patch
Last updated on