Slider

Usage

import { Slider } from '@epilot/spark-ui/slider'

<Slider defaultValue={50} min={0} max={100} aria-label="Volume" />

With no children, Slider renders a default track. Pass an aria-label (or aria-labelledby); it names the thumb for assistive tech. For richer layouts, compose the parts yourself (see below).

Examples

Steps

step snaps the value to a discrete increment. largeStep (default 10) sets the Page Up/Down and Shift + Arrow jump.

Step ticks

variant="ticks" marks each step with a small dot on the rail: light on the accent fill, neutral on the unfilled rail. Needs a sensible step; the dots are hidden when the step count is under 2 or above 24 (so a 100-step slider doesn't become a picket fence). Compose <SliderTicks> alongside <SliderIndicator> for custom layouts.

Direct input

Compose a SliderInput to let people type an exact value, an accessible alternative to dragging. It stays in sync with the thumb both ways. unit renders after the field; give the input its own aria-label.

Value readout

SliderValue renders the current value as read-only text (an <output>), formatted with the Root's format / locale.

Controlled

Pass value + onValueChange. A single number keeps the callback number-typed; pass an array for a range.

Range

Pass an array to render one thumb per value. Give each SliderThumb an index and its own aria-label.

Anatomy

import {
  Slider,
  SliderControl,
  SliderIndicator,
  SliderInput,
  SliderThumb,
  SliderTrack,
  SliderValue,
} from '@epilot/spark-ui/slider'
;<Slider defaultValue={50}>
  <SliderValue />
  <SliderInput aria-label="Value" unit="%" />
  <SliderControl>
    <SliderTrack>
      <SliderIndicator />
      <SliderThumb aria-label="Value" />
    </SliderTrack>
  </SliderControl>
</Slider>

API Reference

Built on Base UI Slider. See the Base UI docs for the full API (value, min, max, step, largeStep, minStepsBetweenValues, orientation, format, locale, onValueChange, onValueCommitted, …). Spark additions:

• Slider is generic over the value shape (number for a single thumb, number[] for a range), so single and range callbacks stay correctly typed.
• SliderInput: an accessible number field bound to a thumb (index, unit).
• variant="ticks" / SliderTicks: contrast dots marking each step, guarded to 2–24 ticks.
• The default (childless) Slider forwards its aria-label / aria-labelledby to the thumb.