Forms & Inputs·Available inReact Vue Angular·View as Markdown

Preview

example.tsxtsx

Value: 40

Switch the framework picker (top-right of the panel) to render the same demo live in React, Vue, or Angular — same class names, ARIA, and visual output across all three.

Playground

Flip props to see how the component responds. The snippet below updates as you change options.

Value: 50

Installation

Sisyphos UI ships unified packages for React, Vue, and Angular. Pick the one that matches your stack — every framework exports the same component classes, ARIA semantics, and CSS tokens.

$ pnpm add @sisyphos-ui/react

Then import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";

Usage

Idiomatic usage in each supported framework

example.tsx

import { useState } from "react";
import { Slider } from "@sisyphos-ui/react";

export const Volume = () => {
  const [v, setV] = useState(50);
  return <Slider value={v} onChange={setV} ariaLabel="Volume" showValue />;
};

Range

Pass two thumbs by adding `range` and a tuple value.

example.tsxtsx

Range: 20 – 80

Show value labels

Render live value bubbles above the thumbs via `showValue`.

example.tsxtsx

Formatted values

`formatValue` lets you add currency, units, or locale formatting.

example.tsxtsx

$120$480

Disabled

Works for both single and range modes.

example.tsxtsx

Semantic colors

Reuse the 5-color palette shared across the library.

example.tsxtsx

API

Prop	Type	Default	Description
value	number \| [number, number]	—	Current value (controlled); a tuple when `range` is set. Use `defaultValue` for uncontrolled.
onChange	(value: number \| [number, number]) => void	—	Called with the next value on drag, track click, keyboard, or input edit.
min	number	0	Lower bound of the track.
max	number	100	Upper bound of the track.
step	number	1	Snap increment for all interactions.
range	boolean	false	Two-thumb mode; `value` / `defaultValue` / `onChange` become tuples.
minGap	number	0	Minimum gap kept between the two thumbs in range mode.
showValue	boolean	false	Show value labels above the thumbs.
formatValue	(value: number) => string	String	Formats the value labels shown by `showValue`.
withInputs	boolean	false	In range mode, render editable number inputs alongside the track for precise entry.
ariaLabel	string \| [string, string]	—	Accessible label(s) — a single string, or a tuple for the two range thumbs.
disabled	boolean	false	Disables all pointer and keyboard interaction.

The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.

Accessibility

Adheres to the Slider WAI-ARIA design pattern.

Each thumb is a focusable <button> with role="slider" exposing aria-valuemin, aria-valuemax, and aria-valuenow.
In range mode aria-valuemin / aria-valuemax of each thumb are clamped to the other thumb (± minGap), so AT announces the real movable range.
Accessible names come from ariaLabel; range thumbs fall back to "Minimum" / "Maximum".
aria-disabled mirrors disabled and disabled thumbs are removed from the tab order (tabIndex={-1}).

Keyboard interactions

Key	Action
`ArrowRight`then`ArrowUp`	Increases the value by `step`.
`ArrowLeft`then`ArrowDown`	Decreases the value by `step`.
`PageUp`	Increases the value by `step × 10`.
`PageDown`	Decreases the value by `step × 10`.
`Home`	Sets the thumb to its minimum (respects `minGap` in range mode).
`End`	Sets the thumb to its maximum (respects `minGap` in range mode).

Need more?View on npm →