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.

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.

Slider Basic Usage

60
0
100

Slider as a Stateful Component

50
0
100

Slider Range

25
75
0
100

Disabled Slider

40
0
100

Custom min, max and step

90
-300
300

Slider with custom ticks

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

Slider with Overrides

70
0
100

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

25
75
0
100

Note: You should always use longhand CSS properties. Mixing shorthands and longhands will lead into strange behaviors!

Slider API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Slider API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>

Stateful Slider Container API

Warning any = "Prop types are not shown in dev mode"

extract-react-types is not being run in dev mode for speed reasons. If you need to see prop types add the environment variable FORCE_EXTRACT_REACT_TYPES eg:

  • FORCE_EXTRACT_REACT_TYPES=true yarn start <packageName>
  • FORCE_EXTRACT_REACT_TYPES=true yarn start:<team>