Slider
An input where the user selects a value from within a given range.
Preview
Slider 18
😐
Installation
Usage
Examples
01
Slider 01
02
Slider 02
03
Slider 03
04
Slider 04
05
Slider 05
06
Slider 06
07
Slider 07
08
Slider 08
09
Slider 09
10
Slider 10
more...
Slider 11
Slider 12
Slider 13
Slider 14
Slider 15
Slider 16
Slider 17
Okay
😡😍
Slider 18
😐
Slider 19
Slider 20
Slider 21
Slider 22
Slider 23
$
$
Options
| Component | Description | Example Usage |
|---|---|---|
Slider | A component that allows users to select a value or range by sliding a thumb along a track. | <Slider defaultValue={[50]} /> |
Slider.Track | Represents the total range of values and serves as the background over which the thumb slides. | <Slider.Track className="relative h-2 w-full grow overflow-hidden rounded-full bg-secondary" /> |
Slider.Range | Displays the selected range when using a range slider. | <Slider.Range className="absolute h-full bg-primary" /> |
Slider.Thumb | The handle that the user drags along the track to set the value. | <Slider.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-background" /> |