Slider

One or more thumbs on a track, with steps and ticks.

Import
import { Slider } from '@texuli/primitives/slider';
Pattern
Slider (WAI-ARIA APG)
Size budget
4.5 KiB gzip for @texuli/primitives/slider
Reference
packages/primitives/docs/prim-slider.md

Live demo

Loading the Slider demo…

Anatomy

Slider anatomy: each box holds the parts inside it.
  • Slider.Root
    • Slider.Range
    • Slider.Thumb
    • Slider.Tick

Behavior checks

tests/behavior/scenarios/slider.spec.ts runs 10 rows against the Slider scenario on Chromium, WebKit and the Pixel 7. Each row asserts what a user or assistive technology can observe, held to the WAI-ARIA Authoring Practices pattern.

All 10 rows
  1. each thumb is a named slider with its value and bounds
  2. arrows step, Home and End jump to the ends
  3. every enabled thumb is in the Tab order
  4. the two thumbs of a range stay in order
  5. in RTL, ArrowLeft increases and the left end is the maximum
  6. a click on the track moves the nearest thumb there and focuses it
  7. dragging a thumb follows the pointer and commits once on release
  8. a tap on a touch screen moves the thumb
  9. a disabled slider ignores keys and the pointer
  10. axe finds no violations

Limits

  • Every row passes on every project; a flaky row gets at most two retries.
  • Size: at most 4.5 KiB gzip for @texuli/primitives/slider (pnpm size).
  • Open-to-focus: p75 at most 150 ms (asserted with TEXULI_PERF=1).