◇

Slider

4 parts

An accessible slider for picking one or more numeric values from a range by dragging a thumb along a track or using the keyboard. The root owns the value state (controlled via v-model or uncontrolled via defaultValue), snaps to step, clamps to min/max, and handles pointer drags, focus, and arrow / Page / Home / End keys. Pass multiple values for a range (multi-thumb) slider and keep thumbs apart with minStepsBetweenThumbs; supports horizontal and vertical orientation, dir/inverted direction, and emits valueCommit when a drag or keypress settles. It provides context to SliderTrack, SliderRange, and SliderThumb, and renders hidden form inputs when name is set. Reach for it whenever a user should choose a value within known bounds (volume, price range, brightness).

Source

Demo

Loading demo…

Anatomy

Import the parts and compose them. Each part forwards attributes to its underlying element.

vue

import {
  SliderRange,
  SliderRoot,
  SliderThumb,
  SliderTrack,
} from '@robonen/primitives/forms/slider';

<SliderRoot>
  <SliderRange />
  <SliderThumb />
  <SliderTrack />
</SliderRoot>

API Reference

SliderRange

Range

The filled portion of the track representing the selected span, rendered inside `SliderTrack`. It reads the values and bounds from context and absolutely positions itself from the slider's start to the active thumb (or between the lowest and highest thumbs in range mode), respecting orientation and direction.

No props or events — renders its element and forwards attributes.

SliderRoot

Root

An accessible slider for picking one or more numeric values from a range by dragging a thumb along a track or using the keyboard. The root owns the value state (controlled via `v-model` or uncontrolled via `defaultValue`), snaps to `step`, clamps to `min`/`max`, and handles pointer drags, focus, and arrow / Page / Home / End keys. Pass multiple values for a range (multi-thumb) slider and keep thumbs apart with `minStepsBetweenThumbs`; supports horizontal and vertical `orientation`, `dir`/`inverted` direction, and emits `valueCommit` when a drag or keypress settles. It provides context to `SliderTrack`, `SliderRange`, and `SliderThumb`, and renders hidden form inputs when `name` is set. Reach for it whenever a user should choose a value within known bounds (volume, price range, brightness).

Prop	Type	Default	Description
`min`?	`number`	`0`	Min value.
`max`?	`number`	`100`	Max value.
`step`?	`number`	`1`	Step granularity.
`minStepsBetweenThumbs`?	`number`	`0`	Minimum step count between adjacent thumbs in range mode.
`orientation`?	`SliderOrientation`	`'horizontal'`	Orientation.
`dir`?	`SliderDirection`	—	Writing direction. When omitted it is inherited from the nearest `ConfigProvider` (falling back to `'ltr'`); an explicit value wins.
`inverted`?	`boolean`	`false`	Invert the direction of interaction.
`disabled`?	`boolean`	—	Disable all interaction.
`defaultValue`?	`number \| number[]`	—	Uncontrolled initial value(s). Accepts single number or array.
`name`?	`string`	—	Hidden input `name` attribute.
`required`?	`boolean`	—	Mark hidden inputs as required.
`thumbAlignment`?	`SliderThumbAlignment`	`'overflow'`	Thumb positioning strategy. - `'overflow'` (default): thumbs are positioned purely by percentage and may overflow the track at the extremes (offset via CSS if needed). - `'contain'`: thumbs are inset so they stay fully within the track.
`largeStep`?	`number`	`10`	Multiplier applied to `step` for large jumps (Page Up/Down and Shift+Arrow).
`valueText`?	`SliderValueText`	—	Optional formatter producing a human-friendly `aria-valuetext` for each thumb. Receives the raw value and its thumb index.
`modelValue`?	`number[] \| null`	—	Two-way bound value (`v-model`).

Emits

Event	Payload
`update:modelValue`	`[value: number[] \| null]`

SliderThumb

Thumb

A draggable handle rendered as `role="slider"`, one per value, placed inside `SliderTrack`. It registers with the root to claim its index, positions itself along the track by its value's percentage, and handles keyboard interaction (arrow keys step by `step`, Page Up/Down by a larger step, Home/End jump to the bounds) with full ARIA value attributes. Render one thumb for a single value or several for a range; give each an `aria-label`. Exposes `value` and `percent` as slot props.

No props or events — renders its element and forwards attributes.

SliderTrack

Track

The full-length rail the thumbs travel along, rendered inside `SliderRoot`. It registers itself as the geometry reference for pointer math and starts a drag (moving the nearest thumb to the click position) when pressed. Use it as the container for `SliderRange` and one or more `SliderThumb`.

No props or events — renders its element and forwards attributes.