Slider

Basic

A fully accessible range slider with single and dual-thumb support, step marks, value tooltip, and spring-animated thumb interactions.

<Slider defaultValue={[40]} /><Slider defaultValue={[20, 70]} />

Installation

Install the component via the CLI in one command.

npx @work-rjkashyap/unified-ui add slider

pnpm dlx @work-rjkashyap/unified-ui add slider

npx @work-rjkashyap/unified-ui add slider

bunx @work-rjkashyap/unified-ui add slider

Or install the full package

Use this approach if you prefer to install the entire design system as a dependency instead of copying individual components.

npm install @work-rjkashyap/unified-ui

pnpm add @work-rjkashyap/unified-ui

yarn add @work-rjkashyap/unified-ui

bun add @work-rjkashyap/unified-ui

Anatomy

import {
	Slider,
	Button,
} from "@work-rjkashyap/unified-ui";

Basic Usage

Pass an array to defaultValue for an uncontrolled slider. A single value renders one thumb; two values render a range.

{
	/* Single thumb */
}
<Slider defaultValue={[50]} />;

{
	/* Dual thumb range */
}
<Slider defaultValue={[20, 80]} />;

Variants

<Slider defaultValue={[60]} variant="default" /><Slider defaultValue={[60]} variant="primary" /><Slider defaultValue={[60]} variant="success" /><Slider defaultValue={[60]} variant="danger" />

Sizes

<Slider defaultValue={[50]} size="sm" /><Slider defaultValue={[50]} size="md" /><Slider defaultValue={[50]} size="lg" />

With Value Tooltip

Set showTooltip to display the current value above the thumb on hover or focus.

<Slider defaultValue={[65]} showTooltip />{/* With custom format */}<SliderdefaultValue={[20, 75]}showTooltipformatTooltip={(v) => `${v}%`}/>

Step Marks

Enable showMarks to display tick marks at each step interval. Pair with step to control granularity.

<Slider defaultValue={[40]} step={10} showMarks /><SliderdefaultValue={[20, 60]}step={20}showMarksshowTooltip/>

Custom Marks with Labels

Pass a marks array for custom mark positions and labels.

<Slider
	defaultValue={[50]}
	min={0}
	max={100}
	marks={[
		{ value: 0, label: "0" },
		{ value: 25, label: "25" },
		{ value: 50, label: "50" },
		{ value: 75, label: "75" },
		{ value: 100, label: "100" },
	]}
/>

Controlled

Use value and onValueChange for full programmatic control.

const [volume, setVolume] = useState([50]);

<Slider
	value={volume}
	onValueChange={setVolume}
	min={0}
	max={100}
	step={1}
	showTooltip
	formatTooltip={(v) => `${v}%`}
/>;

Range Slider

Two values in defaultValue (or value) create a dual-thumb range input.

const [range, setRange] = useState([20, 80]);

<Slider
	value={range}
	onValueChange={setRange}
	min={0}
	max={100}
	showTooltip
	formatTooltip={(v) => `$${v}`}
/>;

Min / Max / Step

Control the numeric bounds and increment precision.

{
	/* Volume 0–100, step 5 */
}
<Slider defaultValue={[50]} min={0} max={100} step={5} showMarks />;

{
	/* Rating 1–5, step 1 */
}
<Slider defaultValue={[3]} min={1} max={5} step={1} showMarks showTooltip />;

{
	/* Price range */
}
<Slider
	defaultValue={[100, 500]}
	min={0}
	max={1000}
	step={50}
	formatTooltip={(v) => `$${v}`}
	showTooltip
/>;

Disabled

<Slider defaultValue={[40]} disabled />

Props

SliderMark

Keyboard Navigation

Motion

• Thumb hover — Spring scale to 1.1 (stiffness: 400, damping: 30).
• Thumb drag — Spring scale to 1.2 (stiffness: 400, damping: 25).
• Tooltip — fadeInFast preset (opacity 0 → 1, y 4 → 0, 120ms).
• All animations respect prefers-reduced-motion via useReducedMotion().

Accessibility

• Built on @radix-ui/react-slider with full ARIA compliance.
• Each thumb has role="slider" with aria-valuenow, aria-valuemin, aria-valuemax, and aria-orientation automatically managed by Radix.
• Full keyboard navigation (arrow keys, Home, End, Page Up/Down).
• Thumb focus ring via focus-visible ring classes.
• Tooltip is hidden from the accessibility tree (pointer-events-none).

Design Tokens