ComponentsSlider
Slider
A customizable slider component for selecting values within a range
50
50
The Slider component creates a customizable slider input that can be used for single value or range selection. It is a great way to allow users to select values within a specified range.
Tip!
Use the range prop to create a range slider with two thumbs.
Warning!
The Slider component uses the 'use client' directive, ensuring it's only rendered on the client-side. Be mindful of this when using it in your Next.js application.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| min | number | 0 | The minimum value of the slider. |
| max | number | 100 | The maximum value of the slider. |
| step | number | 1 | The step value of the slider. |
| value | number | 0 | The value of the slider. |
| defaultValue | number | 0 | The default value of the slider. |
| showValue | boolean | false | Whether to show the value of the slider. |
| showLabels | boolean | true | Whether to show the labels of the slider. |
| valuePosition | string | 'left' | The position of the value. Possible values: 'left', 'right'. |
| trackColor | string | 'primary-500' | The color of the track. |
| thumbColor | string | 'primary-500' | The color of the thumb. |
Info
The component also accepts any additional props that can be applied to the ReactSlider component.
Usage Examples
Basic Slider
50
Custom Slider
50
0
100
Tip!
Experiment with different props and styles to create sliders that fit your design needs and use cases.