Slider
Range selector with single or dual thumbs, step snapping, marks, and keyboard arrow support.
Preview
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/reactThen import the bundled stylesheet once at app entry: import "@sisyphos-ui/react/styles.css";
Usage
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.
Range: 20 – 80
Show value labels
Render live value bubbles above the thumbs via `showValue`.
Formatted values
`formatValue` lets you add currency, units, or locale formatting.
Disabled
Works for both single and range modes.
Semantic colors
Reuse the 5-color palette shared across the library.
API
Props table is being written. See the package README for the complete API surface.
The full API including refs, ARIA attributes, and HTML passthroughs lives in the package README on npm.