Component size, gzipped: 17kb

Slider

API

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.

Accessibility

Slider sets these attributes:

  • role="slider"
  • aria-valuemin
  • aria-valuemax
  • aria-valuenow

Thumbs can be focused and controlled by the keyboard:

  • tab and shift+tab to focus thumbs
  • arrow up or arrow right or k to increase the thumb value by one step
  • arrow down or arrow left or j to decrease the thumb value by one step
  • page up to increase the thumb value by ten steps
  • page down to decrease the thumb value by ten steps

The component is also optimized for iOS and Android devices.

Examples

Basic usage

60
0
100

Range

25
75
0
100

Disabled state

40
0
100

Custom min, max and step

90
-300
300

Custom ticks

4500m
1.0km
2.4km
3.8km
5.2km
6.6km
8.0km

Overrides usage

70
0
100

Stateful (uncontrolled) usage

50
0
100

As with many of our components, there is also an uncontrolled version, StatefulSlider, which manages its own state.

API

Slider props

NameTypeDescription
disabled
boolean
True when all tabs are disabled.
max
number
The maximum allowed value of the slider. Cannot not be smaller than min.
min
number
The minimum allowed value of the slider. Cannot not be bigger than max.
onChange
function
Called when slider value is changed.
onFinalChange
function
Called when slider value is done changing.
overrides
custom
Lets you customize all aspects of the component.
step
number
The granularity the slider can step through value. Default step is 1.
value
array
Slider value.

Slider exports

You can import this module like so:

import {Slider} from 'baseui/slider'

It exports the following components or utility functions: