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

PropTypeDefaultDescription
valuenumber | number[]Current value; array when range is true
minnumberMinimum value
maxnumberMaximum value
stepnumberStep increment
rangebooleanfalseEnable multi-thumb range mode
orientation"horizontal" | "vertical""horizontal"Layout direction of the slider
resetValuenumberValue for reset option (single mode only)
unitstringUnit displayed (e.g. ms, px)
prefixUnitstringUnit displayed before the value (e.g. $)
labelReactNodeLabel (string or JSX)
marksArray<{ value: number, label: string }>Marks below track (horizontal only)
onChange(value: number | number[]) => voidChange handler; receives array when range is true
minStepsBetweenThumbsnumberMinimum steps between thumbs (range mode only)
disabledbooleanfalseDisable slider