Aspyn

Slider

Range input for values and zoom controls.

Installation

npm install @aspyn-io/kit @aspyn-io/tokens
import { Slider } from "@aspyn-io/kit";

Basic

<Slider defaultValue={[50]} max={100} step={1} aria-label="Volume" />

Controlled zoom control

The dispatch-timeline pattern: bounded zoom with a live readout.

100px/h
const [value, setValue] = React.useState([100]);

<Slider min={40} max={150} step={10} value={value} onValueChange={setValue} />

Range (two thumbs)

<Slider defaultValue={[25, 75]} max={100} step={5} aria-label="Price range" />

Notes

  • Keyboard accessible: arrows step, Page Up/Down jump, Home/End go to bounds (Radix).
  • Pass an array for value/defaultValue — one entry per thumb.