Slider

Horizontal control for selecting a numeric value or range.

Introduction

Use Slider when users pick a number along a continuous scale—volume, opacity, price bounds, or similar. Optional tooltips show the thumb value while hovered or dragged.

Compared to similar components:

NumberField — Precise typed values with steppers. Prefer NumberField when exact digits matter more than scrubbing a track.
Progress — Read-only indicator of work in progress. Slider is interactive.

App-wide form density (size / rounded) can be set with global.formDefaults — see Default props.

Import

import { Slider } from "@bridge-ui/vue/Components/Slider";

import { Slider } from "@bridge-ui/react/Components/Slider";

Basic usage

Defaults are min={0}, max={100}, and step={1}. In React, use value and onChange for controlled state, or defaultValue for uncontrolled. In Vue, use v-model or default-value.

Range

Set range for two thumbs. The value is a [number, number] tuple and stays sorted when thumbs cross.

Stops and tooltips

showStops renders marks from stops, or every step between min and max when stops is omitted. Value tooltips are on by default (showTooltip); set it to false to hide them.

Colors

Use color for the bar and thumbs. Available colors: primary, secondary, success, info, warning, error, dark, and black.

Sizes

Control track and thumb size (and chrome typography) with size. Available sizes: 2xs, xs, sm, md (default), lg, xl, and 2xl.

Validation

Set error and errorMessage for invalid styling and helper text below the control.

Accessibility

Thumbs expose slider semantics with aria-orientation="horizontal".
Provide a label (or associate labels via controlId) so assistive technology has an accessible name.
When error is true, invalid styling and the error message are linked through the field chrome.

Anatomy

Slider (root)
├── Header — label, optional corner text, required indicator
├── Control row
│   ├── start slot (optional)
│   ├── Track — bar, optional stops, thumb(s) with tooltip
│   └── end slot (optional)
└── Footer — description or error message

NumberField, Progress, Rating, OtpField, Tooltip

API

Prop	Type	Default	Description
default-value	number \| [number, number]	min	Initial value for uncontrolled usage (without v-model).
v-model	number \| [number, number]	—	Two-way binding for the current value (or range).

Prop	Type	Default	Description
defaultValue	number \| [number, number]	min	Initial value for uncontrolled usage.
onChange	(value: number \| [number, number]) => void	—	Called when the value changes.
value	number \| [number, number]	—	Controlled value. Use with onChange.

Slider-specific

Prop	Type	Default	Description
classes	SliderClasses	—	Classes for chrome and slider parts.
color	SliderColor	"primary"	Color of the bar and thumbs.
customProps	SliderCustomProps	—	Extra props for internal parts.
max	number	100	Maximum value.
min	number	0	Minimum value.
range	boolean	false	Enables two thumbs; value is [low, high].
rounded	SliderRounded	"full"	Border radius of the track and bar.
showStops	boolean	false	Renders stop marks (stops or every step).
showTooltip	boolean	true	Shows a value tooltip on each thumb while hovered or dragged.
size	SliderSize	"md"	Track / thumb size and chrome typography.
slots	object	—	Chrome slots plus thumb to replace the knob.
step	number	1	Step increment.
stops	SliderStopInput[]	—	Custom marks: number or { value, label? }.

Events

Event	Payload	Description
@change	number \| [number, number]	Emitted when the value changes.
@update:modelValue	number \| [number, number]	Emitted for v-model updates.

Prop	Payload	Description
onChange	number \| [number, number]	Called when the value changes.

Field chrome

Prop	Type	Default	Description
controlId	string	auto	Id for the control and related labels.
corner	string	—	Secondary header text.
description	string	—	Helper text below the control. Hidden when error and an error message are set, unless showDescriptionOnError.
disabled	boolean	false	Disables interaction.
error	boolean	false	Invalid styling. Hides description when an error message is shown, unless showDescriptionOnError.
errorMessage	string	—	Error message below the control.
hideErrorMessage	boolean	false	Does not reserve the error row. That row is also omitted while a description is shown.
label	string	—	Primary label above the control.
readonly	boolean	false	Prevents interaction.
required	boolean	false	Shows a required asterisk on the label.
showDescriptionOnError	boolean	false	Keeps the description visible while the field is invalid.
slots	object	—	label, corner, description, errorMessage, start, end, thumb.