Slider
Slider for fine-tuning numeric values with single or range thumbs, marks, an editable value input, and vertical orientation.
import { Slider } from "@plexui/ui/components/Slider";Examples
Overview
Adding a tooltip
Marks
Range
Multiple thumbs
Vertical
Disabled
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | number[] | — | Required. Current value; array when range is true |
min | number | — | Required. Minimum value |
max | number | — | Required. Maximum value |
step | number | — | Required. 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) |
resetTooltip | string | "Reset to default" | Tooltip and accessible name of the reset button |
unit | string | — | Unit displayed (e.g. ms, px) |
prefixUnit | string | — | Unit displayed before the value (e.g. $) |
label | ReactNode | — | Label (string or JSX). Also names the slider thumbs for assistive technology |
aria-label | string | — | Accessible name when there is no visible label. Range thumbs add Minimum / Maximum (or Value n of m) |
aria-labelledby | string | — | Id of an element that names the slider; takes precedence over label |
marks | Array<{ value: number, label: string }> | — | Marks below track (horizontal only) |
onChange | (value: number | number[]) => void | — | Required. Change handler; receives array when range is true |
minStepsBetweenThumbs | number | — | Minimum steps between thumbs (range mode only) |
disabled | boolean | false | Disable slider |
trackColor | string | — | Color of the slider track |
rangeColor | string | — | Color of the filled range |
className | string | — | Applied to the root element |
onFocus | (event: FocusEvent) => void | — | Called when the value input or a thumb gains focus |
onBlur | (event: FocusEvent) => void | — | Called when the value input or a thumb loses focus |
Typing in the value input reports the parsed value after 250ms; Enter, Escape or leaving the input commits it right away, and Home, End and the arrow keys (Shift for ten steps) change it at once. The input accepts a minus sign when min is below zero. Inside a <form>, a hidden input per thumb fires an input event when its value changes.
Styling
Slider reads these component tokens. Override them at any scope to restyle it:
--slider-range-color: range color (defaultlight-dark(var(--gray-450), var(--gray-600)))--slider-track-color: track color (defaultlight-dark(var(--gray-150), var(--gray-400)))