Add this component

npx zentauri-ui add slider

Accessibility notes

Keyboard accessible controls with labels, focus-visible rings, and state attributes. Keep visible labels or aria-labels when copying snippets.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Forms

Sliders for precise input

Sliders pick numeric values along a continuum. The single Slider composes a track, optional filled range, and a keyboard-focusable thumb. RangeSlider covers min–max selections.

Single

Range

Appearances

Default

Violet (default gradient)

Slider variants playground

Pick a kind and appearance to preview the slider live. Toggle Show output / Show code and the snippet updates to match the selected variant.

Kind

Appearance

All appearances

Every shipped appearance token at a glance. Click any swatch to load it into the playground above.

Range controlled

Value: 25

Slider API

Generated from the package prop types and variant definitions.

RangeSlider

RangeSliderProps

State

Prop	Type	Default
defaultValue	`[number, number] \| undefined`	none
onValueChange	`((value: [number, number]) => void) \| undefined`	none
value	`[number, number] \| undefined`	none

Behavior

Prop	Type	Default
appearance	'default' \| 'blue' \| 'cyan' \| 'green' \| 'lime' \| 'mint' \| 'ocean' \| 'sapphire' \| 'lavender' \| 'ruby' \| 'red' \| 'slate' \| 'zinc' \| 'stone' \| 'royal' \| 'electric' \| 'forest' \| 'sunset' \| 'magenta' \| 'crimson' \| 'aqua' \| 'plum' \| 'sky' \| 'rose' \| 'purple' \| 'pink' \| 'orange' \| 'yellow' \| 'teal' \| 'indigo' \| 'emerald' \| 'gradient-blue' \| 'gradient-green' \| 'gradient-red' \| 'gradient-yellow' \| 'gradient-purple' \| 'gradient-teal' \| 'gradient-indigo' \| 'gradient-pink' \| 'gradient-orange' \| 'gray' \| 'violet' \| 'amber' \| null \| undefined	none
disabled	`boolean \| undefined`	none
max	`number \| undefined`	none
min	`number \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none
step	`number \| undefined`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

Slider

SliderProps

Variants

Prop	Type	Default
appearance	`amberaquabluecrimsoncyandefaultelectricemeraldforestgradient-bluegradient-greengradient-indigo`+31	default

State

Prop	Type	Default
defaultValue	`number \| undefined`	none
onValueChange	`((value: number) => void) \| undefined`	none
value	`number \| undefined`	none

Behavior

Prop	Type	Default
disabled	`boolean \| undefined`	none
max	`number \| undefined`	none
min	`number \| undefined`	none
size	`'md' \| 'sm' \| 'lg' \| null \| undefined`	none
step	`number \| undefined`	none

Content

Prop	Type	Default
children	`ReactNode`	none

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

SliderRange

SliderRangeProps

Variants

Prop	Type	Default
appearance	`amberaquabluecrimsoncyandefaultelectricemeraldforestgradient-bluegradient-greengradient-indigo`+31	default

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

SliderThumb

SliderThumbProps

Variants

Prop	Type	Default
size	`lgmdsm`	md

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

SliderTrack

SliderTrackProps

Variants

Prop	Type	Default
size	`lgmdsm`	md

Inherited HTML props

Prop	Type	Default
children	`ReactNode`	none
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLDivElement> \| undefined`	none
style	`CSSProperties \| undefined`	none
title	`string \| undefined`	none

CSS variable overrides

Slider CSS variables

Override these slider variables on :root, a theme selector, or a component wrapper.

182 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-slider-track-bg: #0000001a;
  --zui-slider-range-default-from: oklch(60.6% 0.25 292.717);
  --zui-slider-range-default-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-sky-from: oklch(68.5% 0.169 237.323);
  --zui-slider-range-sky-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-rose-from: oklch(64.5% 0.246 16.439);
  --zui-slider-range-rose-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-purple-from: oklch(62.7% 0.265 303.9);
  --zui-slider-range-purple-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-pink-from: oklch(65.6% 0.241 354.308);
  --zui-slider-range-pink-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-orange-from: oklch(70.5% 0.213 47.604);
  --zui-slider-range-orange-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-yellow-from: oklch(79.5% 0.184 86.047);
  --zui-slider-range-yellow-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-teal-from: oklch(70.4% 0.14 182.503);
  --zui-slider-range-teal-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-indigo-from: oklch(58.5% 0.233 277.117);
  --zui-slider-range-indigo-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-emerald-from: oklch(69.6% 0.17 162.48);
  --zui-slider-range-emerald-to: oklch(60% 0.118 184.704);
  --zui-slider-range-amber-from: oklch(76.9% 0.188 70.08);
  --zui-slider-range-amber-to: oklch(64.6% 0.222 41.116);
  --zui-slider-range-gray-from: oklch(55.1% 0.027 264.364);
  --zui-slider-range-gray-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-violet-from: oklch(60.6% 0.25 292.717);
  --zui-slider-range-violet-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-blue-from: oklch(62.3% 0.214 259.815);
  --zui-slider-range-gradient-blue-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-green-from: oklch(72.3% 0.219 149.579);
  --zui-slider-range-gradient-green-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-red-from: oklch(63.7% 0.237 25.331);
  --zui-slider-range-gradient-red-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-yellow-from: oklch(79.5% 0.184 86.047);
  --zui-slider-range-gradient-yellow-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-purple-from: oklch(62.7% 0.265 303.9);
  --zui-slider-range-gradient-purple-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-teal-from: oklch(70.4% 0.14 182.503);
  --zui-slider-range-gradient-teal-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-indigo-from: oklch(58.5% 0.233 277.117);
  --zui-slider-range-gradient-indigo-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-pink-from: oklch(65.6% 0.241 354.308);
  --zui-slider-range-gradient-pink-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-gradient-orange-from: oklch(70.5% 0.213 47.604);
  --zui-slider-range-gradient-orange-to: oklch(51.1% 0.262 276.966);
  --zui-slider-range-blue-from: #2563eb;
  --zui-slider-range-blue-to: #2563eb;
  --zui-slider-range-cyan-from: #0891b2;
  --zui-slider-range-cyan-to: #0891b2;
  --zui-slider-range-green-from: #16a34a;
  --zui-slider-range-green-to: #16a34a;
  --zui-slider-range-lime-from: #65a30d;
  --zui-slider-range-lime-to: #65a30d;
  --zui-slider-range-mint-from: #10b981;
  --zui-slider-range-mint-to: #10b981;
  --zui-slider-range-ocean-from: #0284c7;
  --zui-slider-range-ocean-to: #0284c7;
  --zui-slider-range-sapphire-from: #1d4ed8;
  --zui-slider-range-sapphire-to: #1d4ed8;
  --zui-slider-range-lavender-from: #8b5cf6;
  --zui-slider-range-lavender-to: #8b5cf6;
  --zui-slider-range-ruby-from: #be123c;
  --zui-slider-range-ruby-to: #be123c;
  --zui-slider-range-red-from: #dc2626;
  --zui-slider-range-red-to: #dc2626;
  --zui-slider-range-slate-from: #475569;
  --zui-slider-range-slate-to: #475569;
  --zui-slider-range-zinc-from: #52525b;
  --zui-slider-range-zinc-to: #52525b;
  --zui-slider-range-stone-from: #57534e;
  --zui-slider-range-stone-to: #57534e;
  --zui-slider-range-royal-from: #4338ca;
  --zui-slider-range-royal-to: #4338ca;
  --zui-slider-range-electric-from: #0ea5e9;
  --zui-slider-range-electric-to: #0ea5e9;
  --zui-slider-range-forest-from: #166534;
  --zui-slider-range-forest-to: #166534;
  --zui-slider-range-sunset-from: #ea580c;
  --zui-slider-range-sunset-to: #ea580c;
  --zui-slider-range-magenta-from: #c026d3;
  --zui-slider-range-magenta-to: #c026d3;
  --zui-slider-range-crimson-from: #b91c1c;
  --zui-slider-range-crimson-to: #b91c1c;
  --zui-slider-range-aqua-from: #0f766e;
  --zui-slider-range-aqua-to: #0f766e;
  --zui-slider-range-plum-from: #7e22ce;
  --zui-slider-range-plum-to: #7e22ce;
  --zui-slider-thumb-border: #00000033;
  --zui-slider-thumb-bg: #000000;
  --zui-slider-thumb-ring-offset: oklch(98.4% 0.003 247.858);
  --zui-slider-thumb-ring-focus: #00000066;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-slider-track-bg-dark: #ffffff1a;
  --zui-slider-range-default-from-dark: oklch(60.6% 0.25 292.717);
}

Overview

Pointer dragging uses the track geometry so thumbs stay aligned to the pointer path. Provide aria-label or aria-labelledby on the group for context.

Common use cases

Volume and media scrubbing.
Filters for price, rating, or age bands.
Settings panels with bounded numeric controls.
Scheduling windows with dual handles.

FAQ

Is the thumb keyboard accessible?

Yes. The thumb uses role="slider" with Arrow, Home, End, and Page keys adjusting values according to min, max, and step.

Can I control values from React state?

Pass value and onValueChange for controlled usage, or defaultValue for an uncontrolled slider. RangeSlider accepts tuples for paired values.