Slider

molecules

Range slider — single or dual thumb. 4px track, 20px thumb. Keyboard arrow keys, ARIA slider pattern.

ARIA Role: slider

Demo

Demo for Slider (molecules)

Range slider — single or dual thumb. 4px track, 20px thumb. Keyboard arrow keys, ARIA slider pattern.

Props

Prop	Type	Required	Default
`value`	`number \| [number, number]`	Yes	`—`
`onChange`	`(value: number \| [number, number]) => void`	Yes	`—`
`label`	`string`	Yes	`—`

TypeScript Interface

interface SliderProps {
  value: number | [number, number];
  onChange: (value: number | [number, number]) => void;
  min: number;
  max: number;
  step?: number;
  label: string;
  formatValue?: (v: number) => string;
}

Assertions (NASA Rule 5)

[type]value in [min, max]; step > 0 (NASA Rule 7)(NASA Rule 7)
[aria]role='slider' aria-valuenow/min/max; for range, two role='slider' thumbs(WAI-ARIA Slider Pattern)

Usage

Import

import { Slider } from '@epasslive/design-system'

Basic

<Slider />

With Variants

<Slider variant="primary" size="md" />