Forms

Slider

A single-value range control with keyboard support and a square thumb.

BetaNew shared patternRegistry JSON

Monthly budget$2,400

Arrow keys move in $100 steps. Home and End jump to the range edges.

Alert threshold65%

Warn me when usage passes 65% of the budget.

Installation

Copy the source with the CLI to own and edit it, or import it from the npm package.

npx aback-ui@latest add slider

Writes components/ui/slider.tsx. First time in this project? Run npx aback-ui@latest init first, as the installation guide shows.

Import the parts you need from the installed file. The Code tab above has a complete, working example.

tsx

import { Slider } from "@/components/ui/slider";

Props and composition points for Slider. Native element props pass through.

Prop	Type	Default	Description
`label`	`string`	None	Accessible name for the thumb. Required unless you pass aria-labelledby to a visible label.
`value / defaultValue / onValueChange`	`number[] / number[] / (value: number[]) => void`	None	Controlled or uncontrolled value. The array holds one entry per thumb.
`min / max / step`	`number`	0 / 100 / 1	Range and increment. Keep steps coarse enough to hit with a keyboard.
`orientation`	`"horizontal" \| "vertical"`	"horizontal"	Slider direction. Arrow keys follow the orientation.
`disabled`	`boolean`	None	Prevents interaction and reduces opacity.

Dependencies: radix-ui, plus the shared @/lib/utils helper.

Semantics, keyboard behavior, and the decisions that keep the component operable.

Renders role slider on the thumb with aria-valuenow, aria-valuemin, and aria-valuemax.
The thumb needs a name from label or aria-labelledby. A visible label and value beside the slider is the clearest pattern.
Arrow keys change the value, Home and End jump to the range edges, and Page Up/Down move in larger steps.
The square thumb follows the Aback geometry. The checked fill and the numeric value both communicate state, not colour alone.

Key	Action
`ArrowLeft`or`ArrowRight`	Change the value by one step.
`Home`or`End`	Jump to the minimum or maximum.
`PageUp`or`PageDown`	Move in a larger increment.

The Aback products whose interfaces shaped this component.

This component is new in Aback UI. It has not shipped in an Aback product yet, so no production use is claimed.