Slider

Control input with sliding axis to choose a single value or range between min and max values.

There are two slider options in Base that allow users to select a single value or a range. Each slider has a primary control handle that cues user interaction.

Examples

Slider Basic Usage
0
100
Slider as a Stateful Component
0
100
Slider Range example
0
100
Slider with custom labels
Bad
Better
Best
Slider as a stepped slider
0
10
Slider with Multiple Ticks
0
20
40
60
80
100
Slider with Overrides
0
10

Additionally, you can fully customize any part of the Slider through the overrides prop. The Slider consists of multiple sub-components that are listed bellow and you can override each one of them. To help you identify the names of these sub-components, you can highlight them through this selector:

0
100