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
	.pf-v6-c-slider	--pf-v6-c-slider--value	0
	.pf-v6-c-slider	--pf-v6-c-slider__step--InsetInlineStart	0
	.pf-v6-c-slider	--pf-v6-c-slider__rail--PaddingBlockStart	1rem
--pf-v6-c-slider__rail--PaddingBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-slider	--pf-v6-c-slider__rail--PaddingBlockEnd	1rem
--pf-v6-c-slider__rail--PaddingBlockEnd --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-slider	--pf-v6-c-slider__rail-track--Height	0.25rem
	.pf-v6-c-slider	--pf-v6-c-slider__rail-track--before--base--BackgroundColor	(In light theme) #e0e0e0
--pf-v6-c-slider__rail-track--before--base--BackgroundColor --pf-t--global--color--nonstatus--gray--default --pf-t--global--color--nonstatus--gray--100 --pf-t--color--gray--20 #e0e0e0
	.pf-v6-c-slider	--pf-v6-c-slider__rail-track--before--fill--BackgroundColor	(In light theme) #4394e5
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor --pf-t--global--border--color--hover --pf-t--global--color--brand--100 --pf-t--color--blue--40 #4394e5
	.pf-v6-c-slider	--pf-v6-c-slider__rail-track--before--BorderRadius	4px
--pf-v6-c-slider__rail-track--before--BorderRadius --pf-t--global--border--radius--tiny --pf-t--global--border--radius--100 4px
	.pf-v6-c-slider	--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop	0
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop --pf-v6-c-slider--value 0
	.pf-v6-c-slider	--pf-v6-c-slider__steps--FontSize	0.875rem
--pf-v6-c-slider__steps--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-slider	--pf-v6-c-slider__steps--Height	0.875rem
--pf-v6-c-slider__steps--Height --pf-v6-c-slider__steps--FontSize --pf-t--global--font--size--sm --pf-t--global--font--size--200 0.875rem
	.pf-v6-c-slider	--pf-v6-c-slider__step-tick--InsetBlockStart	1rem
--pf-v6-c-slider__step-tick--InsetBlockStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-slider	--pf-v6-c-slider__step-tick--Width	0.15rem
	.pf-v6-c-slider	--pf-v6-c-slider__step-tick--Height	0.25rem
	.pf-v6-c-slider	--pf-v6-c-slider__step-tick--BackgroundColor	(In light theme) #1f1f1f
--pf-v6-c-slider__step-tick--BackgroundColor --pf-t--global--icon--color--nonstatus--on-gray--default --pf-t--global--icon--color--regular --pf-t--global--icon--color--100 --pf-t--color--gray--90 #1f1f1f
	.pf-v6-c-slider	--pf-v6-c-slider__step-tick--TranslateX	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__step-tick--BorderRadius	0px
--pf-v6-c-slider__step-tick--BorderRadius --pf-t--global--border--radius--sharp --pf-t--global--border--radius--0 0px
	.pf-v6-c-slider	--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor --pf-t--global--icon--color--on-brand--default --pf-t--global--icon--color--inverse --pf-t--global--icon--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-slider	--pf-v6-c-slider__step--first-child__step-tick--TranslateX	0
	.pf-v6-c-slider	--pf-v6-c-slider__step--last-child__step-tick--TranslateX	-100%
	.pf-v6-c-slider	--pf-v6-c-slider__step-label--TranslateX	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__step-label--InsetBlockStart	calc(2rem + 0.25rem)
--pf-v6-c-slider__step-label--InsetBlockStart calc(--pf-t--global--spacer--xl + --pf-v6-c-slider__rail-track--Height) calc(--pf-t--global--spacer--500 + 0.25rem) calc(2rem + 0.25rem)
	.pf-v6-c-slider	--pf-v6-c-slider__step--first-child__step-label--TranslateX	0
	.pf-v6-c-slider	--pf-v6-c-slider__step--last-child__step-label--TranslateX	-100%
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--InsetBlockStart	calc(0.25rem / 2 + 1rem)
--pf-v6-c-slider__thumb--InsetBlockStart calc(--pf-v6-c-slider__rail-track--Height / 2 + --pf-t--global--spacer--md) calc(0.25rem / 2 + --pf-t--global--spacer--300) calc(0.25rem / 2 + 1rem)
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--Width	1rem
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--Height	1rem
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--InsetInlineStart	0
--pf-v6-c-slider__thumb--InsetInlineStart --pf-v6-c-slider--value 0
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--BackgroundColor	(In light theme) #0066cc
--pf-v6-c-slider__thumb--BackgroundColor --pf-t--global--color--brand--default --pf-t--global--color--brand--200 --pf-t--color--blue--50 #0066cc
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--TranslateX	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--TranslateY	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--BorderRadius	24px
--pf-v6-c-slider__thumb--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--BoxShadow--base	0 0 0 2px #ffffff, 0 0 0 3px #0066cc
--pf-v6-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50 0 0 0 2px #ffffff, 0 0 0 3px #0066cc
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--hover--BoxShadow	0 0 0 2px #ffffff, 0 0 0 3px #0066cc
--pf-v6-c-slider__thumb--hover--BoxShadow --pf-v6-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50 0 0 0 2px #ffffff, 0 0 0 3px #0066cc
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--focus--BoxShadow	0 0 0 2px #ffffff, 0 0 0 3px #0066cc
--pf-v6-c-slider__thumb--focus--BoxShadow --pf-v6-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50 0 0 0 2px #ffffff, 0 0 0 3px #0066cc
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--active--BoxShadow	0 0 0 2px #ffffff, 0 0 0 3px #0066cc, 0 0 2px 5px #92c5f9
--pf-v6-c-slider__thumb--active--BoxShadow --pf-v6-c-slider__thumb--BoxShadow--base, 0 0 2px 5px --pf-t--global--color--nonstatus--blue--clicked 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default, 0 0 2px 5px --pf-t--global--color--nonstatus--blue--200 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200, 0 0 2px 5px --pf-t--color--blue--30 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50, 0 0 2px 5px #92c5f9 0 0 0 2px #ffffff, 0 0 0 3px #0066cc, 0 0 2px 5px #92c5f9
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--before--Width	44px
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--before--Height	44px
--pf-v6-c-slider__thumb--before--Height --pf-v6-c-slider__thumb--before--Width 44px
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--before--BorderRadius	24px
--pf-v6-c-slider__thumb--before--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--before--TranslateX	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__thumb--before--TranslateY	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__value--MarginInlineStart	1rem
--pf-v6-c-slider__value--MarginInlineStart --pf-t--global--spacer--md --pf-t--global--spacer--300 1rem
	.pf-v6-c-slider	--pf-v6-c-slider__value--c-form-control--width-base	calc(1rem + 1rem + 1.25rem)
--pf-v6-c-slider__value--c-form-control--width-base calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default + 1.25rem) calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + 1.25rem) calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 1.25rem) calc(1rem + 1rem + 1.25rem)
	.pf-v6-c-slider	--pf-v6-c-slider__value--c-form-control--width-chars	3
	.pf-v6-c-slider	--pf-v6-c-slider__value--c-form-control--Width	calc(calc(1rem + 1rem + 1.25rem) + 3 * 1ch)
--pf-v6-c-slider__value--c-form-control--Width calc(--pf-v6-c-slider__value--c-form-control--width-base + --pf-v6-c-slider__value--c-form-control--width-chars * 1ch) calc(calc(--pf-t--global--spacer--control--horizontal--default + --pf-t--global--spacer--control--horizontal--default + 1.25rem) + 3 * 1ch) calc(calc(--pf-t--global--spacer--md + --pf-t--global--spacer--md + 1.25rem) + 3 * 1ch) calc(calc(--pf-t--global--spacer--300 + --pf-t--global--spacer--300 + 1.25rem) + 3 * 1ch) calc(calc(1rem + 1rem + 1.25rem) + 3 * 1ch)
	.pf-v6-c-slider	--pf-v6-c-slider__value--m-floating--TranslateX	-50%
	.pf-v6-c-slider	--pf-v6-c-slider__value--m-floating--TranslateY	-100%
	.pf-v6-c-slider	--pf-v6-c-slider__value--m-floating--InsetInlineStart	0
--pf-v6-c-slider__value--m-floating--InsetInlineStart --pf-v6-c-slider--value 0
	.pf-v6-c-slider	--pf-v6-c-slider__value--m-floating--ZIndex	200
--pf-v6-c-slider__value--m-floating--ZIndex --pf-t--global--z-index--sm --pf-t--global--z-index--200 200
	.pf-v6-c-slider	--pf-v6-c-slider__actions--MarginInlineEnd	0.5rem
--pf-v6-c-slider__actions--MarginInlineEnd --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-slider	--pf-v6-c-slider__main--actions--MarginInlineStart	0.5rem
--pf-v6-c-slider__main--actions--MarginInlineStart --pf-t--global--spacer--sm --pf-t--global--spacer--200 0.5rem
	.pf-v6-c-slider	--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-slider	--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor	(In light theme) #a3a3a3
--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-slider	--pf-v6-c-slider--m-disabled__thumb--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-slider--m-disabled__thumb--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-slider	--pf-v6-c-slider__rail-track--before--fill--direction	right
	:where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider	--pf-v6-c-slider__rail-track--before--fill--direction	left
	.pf-v6-c-slider.pf-m-disabled	--pf-v6-c-slider__rail-track--before--fill--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-slider__rail-track--before--fill--BackgroundColor --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-slider.pf-m-disabled	--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor	(In light theme) #a3a3a3
--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor --pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor --pf-t--global--icon--color--disabled --pf-t--global--color--disabled--200 --pf-t--color--gray--40 #a3a3a3
	.pf-v6-c-slider.pf-m-disabled	--pf-v6-c-slider__thumb--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-slider__thumb--BackgroundColor --pf-v6-c-slider--m-disabled__thumb--BackgroundColor --pf-t--global--background--color--disabled--default --pf-t--global--color--disabled--100 --pf-t--color--gray--30 #c7c7c7
	.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb	--pf-v6-c-slider__thumb--BoxShadow	none
	.pf-v6-c-slider__step.pf-m-active	--pf-v6-c-slider__step-tick--BackgroundColor	(In light theme) #ffffff
--pf-v6-c-slider__step-tick--BackgroundColor --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor --pf-t--global--icon--color--on-brand--default --pf-t--global--icon--color--inverse --pf-t--global--icon--color--300 --pf-t--color--white #ffffff
	.pf-v6-c-slider__step:first-child	--pf-v6-c-slider__step-tick--TranslateX	0
--pf-v6-c-slider__step-tick--TranslateX --pf-v6-c-slider__step--first-child__step-tick--TranslateX 0
	.pf-v6-c-slider__step:first-child	--pf-v6-c-slider__step-label--TranslateX	0
--pf-v6-c-slider__step-label--TranslateX --pf-v6-c-slider__step--first-child__step-label--TranslateX 0
	.pf-v6-c-slider__step:last-child	--pf-v6-c-slider__step-tick--TranslateX	-100%
--pf-v6-c-slider__step-tick--TranslateX --pf-v6-c-slider__step--last-child__step-tick--TranslateX -100%
	.pf-v6-c-slider__step:last-child	--pf-v6-c-slider__step-label--TranslateX	-100%
--pf-v6-c-slider__step-label--TranslateX --pf-v6-c-slider__step--last-child__step-label--TranslateX -100%
	.pf-v6-c-slider__thumb:hover	--pf-v6-c-slider__thumb--BoxShadow	0 0 0 2px #ffffff, 0 0 0 3px #0066cc
--pf-v6-c-slider__thumb--BoxShadow --pf-v6-c-slider__thumb--hover--BoxShadow --pf-v6-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50 0 0 0 2px #ffffff, 0 0 0 3px #0066cc
	.pf-v6-c-slider__thumb:focus	--pf-v6-c-slider__thumb--BoxShadow	0 0 0 2px #ffffff, 0 0 0 3px #0066cc
--pf-v6-c-slider__thumb--BoxShadow --pf-v6-c-slider__thumb--focus--BoxShadow --pf-v6-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50 0 0 0 2px #ffffff, 0 0 0 3px #0066cc
	.pf-v6-c-slider__thumb:active	--pf-v6-c-slider__thumb--BoxShadow	0 0 0 2px #ffffff, 0 0 0 3px #0066cc, 0 0 2px 5px #92c5f9
--pf-v6-c-slider__thumb--BoxShadow --pf-v6-c-slider__thumb--active--BoxShadow --pf-v6-c-slider__thumb--BoxShadow--base, 0 0 2px 5px --pf-t--global--color--nonstatus--blue--clicked 0 0 0 2px --pf-t--global--background--color--primary--default, 0 0 0 3px --pf-t--global--color--brand--default, 0 0 2px 5px --pf-t--global--color--nonstatus--blue--200 0 0 0 2px --pf-t--global--background--color--100, 0 0 0 3px --pf-t--global--color--brand--200, 0 0 2px 5px --pf-t--color--blue--30 0 0 0 2px --pf-t--color--white, 0 0 0 3px --pf-t--color--blue--50, 0 0 2px 5px #92c5f9 0 0 0 2px #ffffff, 0 0 0 3px #0066cc, 0 0 2px 5px #92c5f9
	.pf-v6-c-slider__value.pf-m-floating	--pf-v6-c-slider__value--MarginInlineStart	0
	.pf-v6-c-slider__main ~ .pf-v6-c-slider__actions	--pf-v6-c-slider__actions--MarginInlineEnd	0

View source on GitHub