Components
Slider
An input where the user selects a value from within a given range.
Loading
Installation
pnpm dlx shadcn@latest add @toui/slider
Examples
Range
Loading
Tooltip
Loading
Input
Loading
Form
Loading
Pattern
Tokens
4 CSS variables in 4 categories.
track-height
| CSS Variable | Value | Description |
|---|---|---|
--slider-track-height | 0.375rem | 6px — horizontal track thickness |
track-width
| CSS Variable | Value | Description |
|---|---|---|
--slider-track-width | 0.375rem | 6px — vertical track width |
thumb-size
| CSS Variable | Value | Description |
|---|---|---|
--slider-thumb-size | 1rem | 16px — thumb diameter |
thumb-border
| CSS Variable | Value | Description |
|---|---|---|
--slider-thumb-border | 2px | Thumb border width |
Credits
- Built with Radix UI Slider.