Search
Search components and blocks
Slider
The Radix Slider with a thumb that grows on drag and hover instead of staying a fixed size — pricing calculators, usage limits, filters.
Install
$ pnpm dlx shadcn@latest add @ditherui/slider
Props
PropTypeDefault
valuenumber[]—defaultValuenumber[][min, max]minnumber0maxnumber100stepnumber1variant"default" | "slosh""default"disabledbooleanfalseSlosh Slider
ProA slider whose fill has weight: drag fast and it sloshes past the handle, then settles back.
Props
PropTypeDefault
valuenumber[]—defaultValuenumber[][min, max]minnumber0maxnumber100stepnumber1variant"default" | "slosh""default"disabledbooleanfalseWhen to use the slider
Use sliders for ranges such as pricing calculators, usage limits and filters. The thumb grows on drag and hover.
Open the CLI tab on any preview above for the exact shadcn command. The source is copied into your project, so you can edit it like any other file.