Slider Component

An input where the user selects a value from within a given range.

Basic

A simple slider with default settings.

Value: 50

Custom Range

Set custom minimum and maximum values.

Value: 100 (0-200)

Step Increment

Control the granularity with the step property.

Value: 50 (increments of 5)

Disabled

A disabled slider cannot be interacted with.

Value: 50 (disabled)

Usage Examples

Common use cases for sliders.

Volume Control

75%

Price Filter

Maximum price: $500

Quality Setting

Medium Quality

Brightness

80%

Accessibility

The Slider uses the native HTML range input which provides built-in keyboard navigation (arrow keys) and screen reader support.

An unhandled error has occurred. Reload 🗙