Slider
Fine-tune values within a set range
import { Slider } from "@plexui/ui/components/Slider";Examples
Overview
Adding a tooltip
Marks
Range
Multiple thumbs
Vertical
Disabled
Reference
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | number[] | — | Current value; array when range is true |
min | number | — | Minimum value |
max | number | — | Maximum value |
step | number | — | Step increment |
range | boolean | false | Enable multi-thumb range mode |
orientation | "horizontal" | "vertical" | "horizontal" | Layout direction of the slider |
resetValue | number | — | Value for reset option (single mode only) |
unit | string | — | Unit displayed (e.g. ms, px) |
prefixUnit | string | — | Unit displayed before the value (e.g. $) |
label | ReactNode | — | Label (string or JSX) |
marks | Array<{ value: number, label: string }> | — | Marks below track (horizontal only) |
onChange | (value: number | number[]) => void | — | Change handler; receives array when range is true |
minStepsBetweenThumbs | number | — | Minimum steps between thumbs (range mode only) |
disabled | boolean | false | Disable slider |