Slider

A slider is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values.

Examples

Discrete

Slider value is: 50

(min = 0, max = 200, step = 50)

Slider value is: 25

(min = -25, max = 75, step = 10, boundaries not shown)

Slider value is: 50

(min = -25, max = 75, step = 10, boundaries shown)

Slider value is: 50

(min = -25, max = 75, step = 10, boundaries shown, ticks not shown)

Slider value is: 3

(max = 5, custom steps)

Slider value is: 25

(min = 12, max = 86, custom steps with non linear data)

Continuous

hasTooltipOverThumb

Slider Value is: 50

Slider value is: 50

Value input

Thumb value input

Actions

Slider value is: 50

Disabled

Slider value is: 4

Types

SliderOnChangeEvent

The slider's onChange prop accepts an event parameter of the following types:

React.MouseEvent
React.KeyboardEvent
React.FormEvent<HTMLInputElement>
React.TouchEvent
React.FocusEvent<HTMLInputElement>

The SliderOnChangeEvent type is a union of the above event types, and can be imported and used in your code like in the following code snippet:

import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';

<Slider onChange={(event: SliderOnChangeEvent) => {}} />

Props

Slider

The main slider component.
*required
Name	Type	Default	Description
areCustomStepsContinuous	boolean	false	Flag indicating if the slider is discrete for custom steps. This will cause the slider to snap to the closest value.
aria-describedby	string		One or more id's to use for the slider thumb's accessible description.
aria-labelledby	string		One or more id's to use for the slider thumb's accessible label.
className	string		Additional classes added to the slider.
customSteps	SliderStepObject[]		Array of custom slider step objects (value and label of each step) for the slider.
endActions	React.ReactNode		Actions placed at the end of the slider.
hasTooltipOverThumb	boolean	false
inputAriaLabel	string	'Slider value input'	Accessible label for the input field.
inputLabel	string \| number		Text label that is place after the input field.
inputPosition	'aboveThumb' \| 'right' \| 'end'	'end'	Position of the input. Note "right" is deprecated. Use "end" instead
inputValue	number	0	Value displayed in the input field.
isDisabled	boolean	false	Adds disabled styling, and disables the slider and the input component if present.
isInputVisible	boolean	false	Flag to show value input field.
Deprecated: leftActions	React.ReactNode		Use startActions instead. Actions placed at the start of the slider.
max	number	100	The maximum permitted value.
min	number	0	The minimum permitted value.
onChange	( event: SliderOnChangeEvent, value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => void		Value change callback. This is called when the slider value changes.
Deprecated: rightActions	React.ReactNode		Use endActions instead. Actions placed to the right of the slider.
showBoundaries	boolean	true	Flag to indicate if boundaries should be shown for slider that does not have custom steps.
showTicks	boolean	false	Flag to indicate if ticks should be shown for slider that does not have custom steps.
startActions	React.ReactNode		Actions placed at the start of the slider.
step	number	1	The step interval.
thumbAriaLabel	string	'Value'
value	number	0	Current value of the slider.

SliderStepObject

Properties for creating custom steps in a slider. These properties should be passed in as an object within an array to the slider component's customSteps property.
*required
Name	Type	Description
labelrequired	string	The display label for the step value. This is also used for the aria-valuetext attribute.
valuerequired	number	Value of the step. This value is a percentage of the slider where the tick is drawn.
isLabelHidden	boolean	Flag to hide the label.

CSS variables

Expand or collapse column	Selector	Variable	Value

View source on GitHub