Slider
An input where the user selects a value from within a given range.
Installation
›pnpm dlx shadcn@latest add @evolphin/slider
Usage
import { Slider } from "@/components/ui/slider"<Slider defaultValue={[33]} max={100} step={1} />Type Definitions
interface SliderProps {
/** The value of the slider when initially rendered */
defaultValue?: number[]; /** The controlled value of the slider */
?: number[];
/** The minimum value for the range */
?: number;
/** The maximum value for the range */
?: number;
/** The stepping interval */
?: number;
/** Event handler called when the value changes */
?: (: number[]) => void;
}Examples
Default
API Reference
Slider
| Prop | Type | Default | Description |
|---|---|---|---|
defaultValue | number[] | - | The value of the slider when initially rendered. |
value | number[] | - | The controlled value of the slider. |
onValueChange | (value: number[]) => void | - | Event handler called when the value changes. |
min | number | 0 | The minimum value for the range. |
max | number | 100 | The maximum value for the range. |
step | number | 1 | The stepping interval. |
className | string | - | Additional CSS classes |