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

0
100

Slider as a Stateful Component

0
100

Slider Range

0
100

Disabled Slider

0
100

Custom min, max and step

-300
300

Slider with custom ticks

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

Slider with Overrides

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:

0
100

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

Slider API

value Array<number> required

Position of the thumbs. It can be a single point (one thumb) or 2 points array (range thumbs).

Arraynumber

min number = 0

The minimum allowed value of the slider. Should not be bigger than max.

max number = 100

The maximum allowed value of the slider. Should not be smaller than min.

step number = 1

The granularity the slider can step through value. Default step is 1.

overrides object = {}

Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Track { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
InnerTrack { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Tick { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
TickBar { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Thumb { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
InnerThumb { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
ThumbValue { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*

disabled boolean required

Disable control from being changed.

onChange function = () => undefined

Handler for events on trigger element, each time thumbs change selection, which is passed in value.

value required Arraynumber
=> mixed

Stateful Slider API

overrides object

Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Track { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
InnerTrack { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Tick { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
TickBar { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Thumb { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
InnerThumb { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
ThumbValue { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*

initialState object

Initial state populated into the component

value required Arraynumber

min number

max number

step number

onChange function

Handler for events on trigger element, each time thumbs change selection, which is passed in value.

value required Arraynumber
=> mixed

Stateful Slider Container API

overrides object

Root { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Track { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
InnerTrack { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Tick { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
TickBar { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
Thumb { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
InnerThumb { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*
ThumbValue { component: ?ComponentType<<T>>, props: ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T>>*

children function required

* => React$Node

min number = 0

max number = 100

step number = 1

initialState object required

Initial state populated into the component

value required Arraynumber

stateReducer function = (type, nextState) => undefined

Reducer function to manipulate internal state updates.

function
string,
value required Arraynumber
,
value required Arraynumber
=>
value required Arraynumber

onChange function = () => undefined

Handler for events on trigger element, each time thumbs change selection, which is passed in value.

value required Arraynumber
=> mixed