Slider

Range selector with single or dual thumbs, step snapping, marks, and keyboard arrow support.

Forms & Inputs@sisyphos-ui/sliderView on npm

Preview

tsx

Value: 40

Installation

Install the individual package:

snippet.bashbash
pnpm add @sisyphos-ui/slider @sisyphos-ui/core

Or use the umbrella package that bundles everything:

snippet.bashbash
pnpm add @sisyphos-ui/ui

Usage

Import the component styles and the component itself:

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

Range

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

tsx

Range: 2080

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.