Core / Controls

Slider

Selects a numeric value or range.

Live example

Notification volume: 68%.

Interactive preview using local sample data. Styling is intentionally left to the consuming project.

Usage

<Slider min={0} max={100} value={50} />

Adopt to your project

Keep this component semantically neutral. Use its documented props for behavior and className for project-specific spacing, width, typography, and visual treatment.

Accessibility

Support keyboard increments and expose the current numeric value.

API reference

Public attribute
`value`
`min`
`max`
`step`
`onChange`
`disabled`

The preview above uses a safe local fixture. Confirm exact TypeScript props when adapting it to your application.

Installation

Full library
pnpm install:project /absolute/path/to/your-project

Planned guided selection
Controls → Slider