Slider Component

The Slider component provides an intuitive way to select numeric values within a specified range. It’s perfect for settings, filters, and any interface where users need precise control over numeric inputs.

Key Features

• Custom Styling: Multiple variants and sizes

• Value Display: Optional value indicator

• Form Integration: Native form support

• Accessibility: Full keyboard and screen reader support

Basic Usage

Create a simple slider with a value and range:

1
<Slider
2
    min={0}
3
    max={100}
4
    value={50}
5
/>

Variants

Default Style

Size Options

Enhanced Features

Add labels and value displays:

1
<Slider
2
    label="Volume Control"
3
    sublabel="Adjust system volume"
4
    showValue={true}
5
    min={0}
6
    max={100}
7
    value={75}
8
/>

Slider Component Props API