Slider
Slider for fine-tuning numeric values with single or range thumbs, marks, an editable value input, and vertical orientation.
import { Slider } from "@plexui/vue/components/Slider";Examples
Overview
Adding a tooltip
Marks
Range
Multiple thumbs
Vertical
Disabled
API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | number[] | — | Required. Current value; an array when range is set. Bind with v-model:value |
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 |
reset-value | number | — | Value for the reset option (single mode only) |
reset-tooltip | string | "Reset to default" | Tooltip and accessible name of the reset button (single mode only) |
unit | string | — | Unit displayed after the value (e.g. ms, px) |
prefix-unit | string | — | Unit displayed before the value (e.g. $) |
label | string | — | Label text. Also names the slider thumbs for assistive technology |
label slot | VNode[] | — | Rich label content (e.g. a tooltip); takes precedence over the label prop |
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 the track (horizontal only) |
track-color | string | — | Color of the slider track |
range-color | string | — | Color of the filled part of the track |
min-steps-between-thumbs | number | — | Minimum steps between thumbs (range mode only) |
disabled | boolean | false | Disable the slider |
class | string | — | Extra classes on the wrapper element |
@update:value | (value: number | number[]) => void | — | Emitted when the value changes; an array when range is set; powers v-model:value |
@change | (value: number | number[]) => void | — | Emitted with update:value, named after the React onChange prop |
@focus | (event: FocusEvent) => void | — | Emitted when the value input or a thumb gains focus |
@blur | (event: FocusEvent) => void | — | Emitted 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)))