Edit this page
[?] Component size, gzipped: 32kb

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.

Examples

Basic usage

60.0
0
100

Range

25.0
75.0
0
100

Disabled state

40.0
0
100

Custom min, max and step

90.0
-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
0
100

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

Overrides

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.0
75.0
0
100

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

API

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> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Track { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerTrack { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Tick { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
TickBar { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Thumb { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerThumb { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ThumbValue { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

disabled boolean = false

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> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Track { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerTrack { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Tick { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
TickBar { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Thumb { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerThumb { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ThumbValue { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

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> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Track { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerTrack { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Tick { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
TickBar { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
Thumb { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
InnerThumb { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*
ThumbValue { component: ?ComponentType<<T> & { children: Node }>, props: ?{} | ({}) => ?{}, style: ?{} | ({}) => ?{} }<<T>> | ComponentType<<T> & { children: Node }>*

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

Slider exports

You can import this module like so:

import {Slider} from 'baseui/slider'

It exports the following components or utility functions:

  • Slider
  • StatefulSlider
  • StatefulContainer
  • StyledRoot
  • StyledTrack
  • StyledInnerTrack
  • StyledThumb
  • StyledInnerThumb
  • StyledTick
  • StyledTickBar
  • StyledThumbValue