Slider
A control that allows the user to select a value or a range of values along a track.
Installation
Add this component to your project using the npui CLI:
npx npui add sliderVariants & Examples
Default Slider
A basic slider for selecting a single value.
1import { Slider } from "@/components/ui/slider"
2
3export function DefaultSlider() {
4 return <Slider defaultValue={[50]} max={100} step={1} className="w-[60%]" />
5}Range Slider
A slider for selecting a range of values.
1import { Slider } from "@/components/ui/slider"
2
3export function RangeSlider() {
4 return <Slider defaultValue={[25, 75]} max={100} step={1} className="w-[60%]" />
5}Props
These are the available props for the Slider component:
| Prop | Type | Description | Default |
|---|---|---|---|
| defaultValue | number[] | The initial value of the slider. | - |
| value | number[] | The controlled value of the slider. | - |
| onValueChange | (value: number[]) => void | Event handler called when the value changes. | - |
| max | number | The maximum value of the slider. | 100 |
| min | number | The minimum value of the slider. | 0 |
| step | number | The step increment for the slider. | 1 |
| disabled | boolean | Whether the slider is disabled. | false |