Slider

<Slider>TailwindCSS Modules

Select numeric values or ranges, such as price and volume, with an accessible draggable control.

InstallationColoxo CLI

npx coloxo add slider

ES Module ImportPlayground / npm package

import { Slider } from '@coloxo/ui';

1. Variant Matrix

Use one thumb for a value or two thumbs for a range. All variants support pointer and keyboard input.

Variant	Default	Disabled
Single value
Range
Stepped
Vertical

2. Control heights (Sizes)

Three control heights with matching track and thumb sizes.

Size	Control / Track / Thumb	Preview
sm	32 / 4 / 16px
md	40 / 6 / 20px
lg	48 / 8 / 24px

3. Interactive Props Configurator

Adjust the controls, drag the thumbs, and copy the generated code.

Control size

Step

Range selection

Vertical

Disabled

Visual Render Canvas

tsx

1import { Slider } from "@coloxo/ui";23<Slider4  defaultValue={[50]}5  size="md"6  step={1}7  aria-label="Value"8/>

4. Dark theme

Tracks, thumbs, and focus rings use semantic theme tokens.

5. Enterprise layout compositions

Live controls for common numeric settings and filters.

Price range

Filter products within your purchasing budget.

$200$800

$0–$1,000 in $25 increments

Meeting volume

Adjust playback volume for your workspace calls.

Output level65%

MutedMaximum

Accessibility

Each thumb is keyboard focusable. Arrow keys adjust by step, Page Up and Page Down use larger steps, and Home and End move to the bounds. Give each thumb a meaningful accessible name, especially range endpoints. Use aria-valuetext when units help explain the value. Focus rings remain visible for keyboard users, and disabled sliders cannot be changed.

Props

Name	Type	Default	Description
value / defaultValue	number[]	—	Controlled values or initial values. Each entry creates one thumb; two values select a range.
onValueChange	(value: number[]) => void	—	Called as a value changes.
onValueCommit	(value: number[]) => void	—	Called after a pointer or keyboard adjustment completes.
min / max	number	0 / 100	Numeric bounds.
step	number	1	Value increment.
minStepsBetweenThumbs	number	0	Minimum gap between thumbs, measured in steps.
size	"sm" \| "md" \| "lg"	md	Control height: 32px, 40px, or 48px.
orientation	"horizontal" \| "vertical"	horizontal	Track direction. Give vertical sliders a container height.
disabled	boolean	false	Prevents pointer and keyboard changes.
thumbLabels	string[]	—	Accessible label for each thumb.
name	string	—	Form field name for submitting values.
dir / inverted	"ltr" \| "rtl" / boolean	—	Reading direction and optional reversed track.