Zentauri UI
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

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.