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 code examples

Use Show output / Show code on each row. Snippets start with a Variant line naming kind and appearance.

Single · appearance: DEFAULT

Single · appearance: SKY

Single · appearance: ROSE

Single · appearance: PURPLE

Single · appearance: PINK

Single · appearance: ORANGE

Single · appearance: YELLOW

Single · appearance: TEAL

Single · appearance: INDIGO

Single · appearance: EMERALD

Single · appearance: AMBER

Single · appearance: GRAY

Single · appearance: VIOLET

Single · appearance: GRADIENT-BLUE

Single · appearance: GRADIENT-GREEN

Single · appearance: GRADIENT-RED

Single · appearance: GRADIENT-YELLOW

Single · appearance: GRADIENT-PURPLE

Single · appearance: GRADIENT-TEAL

Single · appearance: GRADIENT-INDIGO

Single · appearance: GRADIENT-PINK

Single · appearance: GRADIENT-ORANGE

Range · appearance: DEFAULT

Range · appearance: SKY

Range · appearance: ROSE

Range · appearance: PURPLE

Range · appearance: PINK

Range · appearance: ORANGE

Range · appearance: YELLOW

Range · appearance: TEAL

Range · appearance: INDIGO

Range · appearance: EMERALD

Range · appearance: AMBER

Range · appearance: GRAY

Range · appearance: VIOLET

Range · appearance: GRADIENT-BLUE

Range · appearance: GRADIENT-GREEN

Range · appearance: GRADIENT-RED

Range · appearance: GRADIENT-YELLOW

Range · appearance: GRADIENT-PURPLE

Range · appearance: GRADIENT-TEAL

Range · appearance: GRADIENT-INDIGO

Range · appearance: GRADIENT-PINK

Range · appearance: GRADIENT-ORANGE

Range controlled

Value: 25

CSS variable overrides

Slider CSS variables

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

79 variables

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

:root {
  --zui-slider-track-bg: #0000001a;
  --zui-slider-range-from: oklch(60.6% 0.25 292.717);
  --zui-slider-range-to: oklch(51.1% 0.262 276.966);
  --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-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-to-dark: oklch(67.3% 0.182 276.935);
  /* ...same variables with -dark at the end */
}

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.