Components
Slider
A slider component for selecting values within a range. Built on top of Base UI Slider component.
Loading
Installation
pnpm dlx shadcn@latest add @reui/base-slider
Examples
Range
A range slider for selecting minimum and maximum values.
Loading
Loading
Tooltip
A slider with tooltips showing current values.
Loading
Ticks
A slider integrated with form validation.
Loading
Labels
A slider with labels showing current values.
Loading
Rating
A slider with rating functionality.
Loading
Input
A slider with input fields for precise value control.
Form
A slider with form validation.
Loading
Vertical
A vertical slider.
Loading
API Reference
This component is based on Base UI Slider primitive and includes the following custom props:
Slider
The root component that provides context for all slider parts.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |
value | number[] | - | The current slider values |
defaultValue | number[] | - | The default slider values |
min | number | 0 | The minimum value |
max | number | 100 | The maximum value |
step | number | 1 | The step increment |
onValueChange | (value: number[]) => void | - | Callback when value changes |
children | ReactNode | - | The content of the slider component |
SliderThumb
The thumb component that can be dragged to change values.
| Prop | Type | Default | Description |
|---|---|---|---|
className | string | - | Additional CSS classes |