Forms & Inputs@sisyphos-ui/sliderView on npm View as Markdown

Preview

example.tsxtsx

Value: 40

Playground

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

Value: 50

Install the individual package:

$ pnpm add @sisyphos-ui/slider @sisyphos-ui/core

Or use the umbrella package that bundles everything:

$ pnpm add @sisyphos-ui/ui

Import the component styles and the component itself:

snippet.tsxtsx

import "@sisyphos-ui/slider/styles.css";
import { Slider } from "@sisyphos-ui/slider";

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

example.tsxtsx

Range: 20 – 80

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

example.tsxtsx

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

example.tsxtsx

$120$480

Works for both single and range modes.

example.tsxtsx

Reuse the 5-color palette shared across the library.

example.tsxtsx

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.