Component size, gzipped: 22kb

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

0
100

Marks

0
100

Range

0
100

Disabled state

0
100

Custom min, max and step

-300
300

Custom ticks

1.0km
2.4km
3.8km
5.2km
6.6km
8.0km

Overrides usage

0
100

Stateful (uncontrolled) usage

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
True when all tabs are disabled.
marks
Display a mark at each step.
max
The maximum allowed value of the slider. Cannot not be smaller than min.
min
The minimum allowed value of the slider. Cannot not be bigger than max.
onChange
Called when slider value is changed.
onFinalChange
Called when slider value is done changing.
overrides
Lets you customize all aspects of the component.
step
The granularity the slider can step through value. Default step is 1.
value
Slider value.

Slider exports

You can import this module like so:

import {Slider} from 'baseui/slider'

It exports the following components or utility functions: