Slider

An input where the user selects a value from within a given range.

Installation

terminal

npx felicityui add slider --platform react

example.tsx

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

<Slider defaultValue={[33]} max={100} step={1} />

Slider
├── track
├── range
└── thumb(s)

Single thumb on a ruled track with copper fill.

Two values for a range slider.

An array with more than two values.

orientation=vertical.

value + onValueChange.

disabled prevents interaction.

Logical positioning and mirrored keys under dir=rtl.

Prop	Type	Default	Description
value	number \| number[]	—	Controlled value(s).
defaultValue	number \| number[]	—	Uncontrolled initial value(s).
onValueChange	(value: number[]) => void	—	Called when value(s) change.
min	number	—	Minimum value. Default 0.
max	number	—	Maximum value. Default 100.
step	number	—	Increment. Default 1.
orientation	"horizontal" \| "vertical"	—	Track orientation.
disabled	boolean	—	Disables all thumbs.
label	ReactNode	—	Optional visible label.
description	ReactNode	—	Optional helper text.
className	string	—	Additional classes on the root.

WCAG 2.2 AA

Custom multi-thumb slider with Felicity semantic tokens. Copper range fill — not Base UI / Radix runtime.

Client component (pointer drag + keyboard).
Uses data-slot=slider|slider-control|slider-track|slider-range|slider-thumb.
value/defaultValue are number or number[]; onValueChange always receives number[].
Supports range, multiple thumbs, vertical orientation, and RTL via logical positioning.