Bridge UI

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.

Uncontrolled slider with library defaults.

Controlled value with a 5-unit step.

Uncontrolled slider with library defaults.

Controlled value with a 5-unit step.

Range

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

Two thumbs stay sorted when they cross.

Uncontrolled range with a custom max and step.

Two thumbs stay sorted when they cross.

Uncontrolled range with a custom max and step.

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.

With showStops and no stops, marks are generated for every step.

With showStops and no stops, marks are generated for every step.

Colors

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

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.

Choose a value above 30.

Choose a value above 30.

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, OtpField, Tooltip

API

Prop Type Default Description
v-model number | [number, number] — Two-way binding for the current value (or range).
default-value number | [number, number] min Initial value for uncontrolled usage (without v-model).
Prop Type Default Description
value number | [number, number] — Controlled value. Use with onChange.
defaultValue number | [number, number] min Initial value for uncontrolled usage.
onChange (value: number | [number, number]) => void — Called when the value changes.

Slider-specific

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

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
label string — Primary label above the control.
description string — Helper text below the control (hidden when invalid).
corner string — Secondary header text.
required boolean false Shows a required asterisk on the label.
disabled boolean false Disables interaction.
readonly boolean false Prevents interaction.
error boolean false Invalid styling.
errorMessage string — Error message below the control.
hideErrorMessage boolean false Hides the error message row.
controlId string auto Id for the control and related labels.
slots object — label, corner, description, errorMessage, start, end, thumb.