Slider

Forms

A range input that lets users select a numeric value by dragging a handle along a horizontal track.

Loading component...

Run the following command to add this component to your project:

$pnpm dlx static-ui add slider

Import the component directly from the package:

import { Slider } from "@static-ui/ui"

Common props available for this component:

Prop	Type	Description
value	number[]	Controlled value array.
onValueChange	(value: number[]) => void	Callback when value changes.
min	number	Minimum value.
max	number	Maximum value.
step	number	Step increment.
className	string	Additional CSS classes to apply.

Uses `role="slider"` with `aria-valuemin`, `aria-valuemax`, `aria-valuenow` attributes. Supports keyboard arrow navigation.

CalendarDate selection month grid.

CheckboxBinary selection control.

InputText field for user entry.

Input GroupGrouped input with adornments.

Input OTPOne-time passcode entry.

LabelForm control label.

Number FieldNumeric input with steppers.

Radio GroupMutually exclusive options.

SelectDropdown value picker.

SwitchToggle on/off control.

TextareaMulti-line text input.