Slider

A slider provides a quick and effective way for users to 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

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.
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'	'right'	Position of the input.
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.
leftActions	React.ReactNode		Actions placed to the left of the slider.
max	number	100	The maximum permitted value.
min	number	0	The minimum permitted value.
onChange	( value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => void		Value change callback. This is called when the slider value changes.
rightActions	React.ReactNode		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.
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


	.pf-c-slider	--pf-c-slider--value	0
	.pf-c-slider	--pf-c-slider__rail--PaddingTop	1rem
--pf-c-slider__rail--PaddingTop --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-slider	--pf-c-slider__rail--PaddingBottom	1rem
--pf-c-slider__rail--PaddingBottom --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-slider	--pf-c-slider__rail-track--Height	0.25rem
	.pf-c-slider	--pf-c-slider__rail-track--before--base--BackgroundColor	#d2d2d2
--pf-c-slider__rail-track--before--base--BackgroundColor --pf-global--BorderColor--100 $pf-global--BorderColor--100 $pf-color-black-300 #d2d2d2
	.pf-c-slider	--pf-c-slider__rail-track--before--fill--BackgroundColor	#2b9af3
--pf-c-slider__rail-track--before--fill--BackgroundColor --pf-global--active-color--300 $pf-global--active-color--300 $pf-color-blue-300 #2b9af3
	.pf-c-slider	--pf-c-slider__rail-track--before--BorderRadius	30em
--pf-c-slider__rail-track--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-slider	--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop	0
--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop --pf-c-slider--value 0
	.pf-c-slider	--pf-c-slider__steps--FontSize	0.875rem
--pf-c-slider__steps--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-slider	--pf-c-slider__steps--Height	0.875rem
--pf-c-slider__steps--Height --pf-c-slider__steps--FontSize --pf-global--FontSize--sm $pf-global--FontSize--sm pf-font-prem(14px) 0.875rem
	.pf-c-slider	--pf-c-slider__step-tick--Top	1rem
--pf-c-slider__step-tick--Top --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-slider	--pf-c-slider__step-tick--Width	0.25rem
	.pf-c-slider	--pf-c-slider__step-tick--Height	0.25rem
	.pf-c-slider	--pf-c-slider__step-tick--BackgroundColor	#8a8d90
--pf-c-slider__step-tick--BackgroundColor --pf-global--BorderColor--200 $pf-global--BorderColor--200 $pf-color-black-500 #8a8d90
	.pf-c-slider	--pf-c-slider__step-tick--TranslateX	-50%
	.pf-c-slider	--pf-c-slider__step-tick--BorderRadius	30em
--pf-c-slider__step-tick--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-slider	--pf-c-slider__step--m-active__slider-tick--BackgroundColor	#06c
--pf-c-slider__step--m-active__slider-tick--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-slider	--pf-c-slider__step--first-child__step-tick--TranslateX	0
	.pf-c-slider	--pf-c-slider__step--last-child__step-tick--TranslateX	-100%
	.pf-c-slider	--pf-c-slider__step-label--TranslateX	-50%
	.pf-c-slider	--pf-c-slider__step-label--Top	calc(2rem + 0.25rem)
--pf-c-slider__step-label--Top calc(--pf-global--spacer--xl + --pf-c-slider__rail-track--Height) calc($pf-global--spacer--xl + 0.25rem) calc(pf-size-prem(32px) + 0.25rem) calc(2rem + 0.25rem)
	.pf-c-slider	--pf-c-slider__step--first-child__step-label--TranslateX	0
	.pf-c-slider	--pf-c-slider__step--last-child__step-label--TranslateX	-100%
	.pf-c-slider	--pf-c-slider__thumb--Top	calc(0.25rem / 2 + 1rem)
--pf-c-slider__thumb--Top calc(--pf-c-slider__rail-track--Height / 2 + --pf-global--spacer--md) calc(0.25rem / 2 + $pf-global--spacer--md) calc(0.25rem / 2 + pf-size-prem(16px)) calc(0.25rem / 2 + 1rem)
	.pf-c-slider	--pf-c-slider__thumb--Width	1rem
	.pf-c-slider	--pf-c-slider__thumb--Height	1rem
	.pf-c-slider	--pf-c-slider__thumb--Left	0
--pf-c-slider__thumb--Left --pf-c-slider--value 0
	.pf-c-slider	--pf-c-slider__thumb--BackgroundColor	#06c
--pf-c-slider__thumb--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-slider	--pf-c-slider__thumb--TranslateX	-50%
	.pf-c-slider	--pf-c-slider__thumb--TranslateY	-50%
	.pf-c-slider	--pf-c-slider__thumb--BorderRadius	30em
--pf-c-slider__thumb--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-slider	--pf-c-slider__thumb--BoxShadow--base	0 0 0 2px #fff, 0 0 0 3px #06c
--pf-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400 0 0 0 2px #fff, 0 0 0 3px #06c
	.pf-c-slider	--pf-c-slider__thumb--hover--BoxShadow	0 0 0 2px #fff, 0 0 0 3px #06c
--pf-c-slider__thumb--hover--BoxShadow --pf-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400 0 0 0 2px #fff, 0 0 0 3px #06c
	.pf-c-slider	--pf-c-slider__thumb--focus--BoxShadow	0 0 0 2px #fff, 0 0 0 3px #06c
--pf-c-slider__thumb--focus--BoxShadow --pf-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400 0 0 0 2px #fff, 0 0 0 3px #06c
	.pf-c-slider	--pf-c-slider__thumb--active--BoxShadow	0 0 0 2px #fff, 0 0 0 3px #06c, 0 0 2px 5px #bee1f4
--pf-c-slider__thumb--active--BoxShadow --pf-c-slider__thumb--BoxShadow--base, 0 0 2px 5px --pf-global--active-color--200 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100, 0 0 2px 5px $pf-global--active-color--200 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100, 0 0 2px 5px $pf-global--active-color--200 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400, 0 0 2px 5px $pf-color-blue-100 0 0 0 2px #fff, 0 0 0 3px #06c, 0 0 2px 5px #bee1f4
	.pf-c-slider	--pf-c-slider__thumb--before--Width	44px
--pf-c-slider__thumb--before--Width --pf-global--target-size--MinWidth $pf-global--target-size--MinWidth 44px
	.pf-c-slider	--pf-c-slider__thumb--before--Height	44px
--pf-c-slider__thumb--before--Height --pf-global--target-size--MinHeight $pf-global--target-size--MinHeight 44px
	.pf-c-slider	--pf-c-slider__thumb--before--BorderRadius	30em
--pf-c-slider__thumb--before--BorderRadius --pf-global--BorderRadius--lg $pf-global--BorderRadius--lg 30em
	.pf-c-slider	--pf-c-slider__thumb--before--TranslateX	-50%
	.pf-c-slider	--pf-c-slider__thumb--before--TranslateY	-50%
	.pf-c-slider	--pf-c-slider__value--MarginLeft	1rem
--pf-c-slider__value--MarginLeft --pf-global--spacer--md $pf-global--spacer--md pf-size-prem(16px) 1rem
	.pf-c-slider	--pf-c-slider__value--c-form-control--width-base	3.5ch
	.pf-c-slider	--pf-c-slider__value--c-form-control--width-chars	3
	.pf-c-slider	--pf-c-slider__value--c-form-control--Width	calc(3.5ch + (3 * 1ch))
--pf-c-slider__value--c-form-control--Width calc(--pf-c-slider__value--c-form-control--width-base + (--pf-c-slider__value--c-form-control--width-chars * 1ch)) calc(3.5ch + (3 * 1ch))
	.pf-c-slider	--pf-c-slider__value--m-floating--TranslateX	-50%
	.pf-c-slider	--pf-c-slider__value--m-floating--TranslateY	-100%
	.pf-c-slider	--pf-c-slider__value--m-floating--Left	0
--pf-c-slider__value--m-floating--Left --pf-c-slider--value 0
	.pf-c-slider	--pf-c-slider__value--m-floating--ZIndex	200
--pf-c-slider__value--m-floating--ZIndex --pf-global--ZIndex--sm $pf-global--ZIndex--sm 200
	.pf-c-slider	--pf-c-slider__actions--MarginRight	0.5rem
--pf-c-slider__actions--MarginRight --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-slider	--pf-c-slider__main--actions--MarginLeft	0.5rem
--pf-c-slider__main--actions--MarginLeft --pf-global--spacer--sm $pf-global--spacer--sm pf-size-prem(8px) 0.5rem
	.pf-c-slider	--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor	#8a8d90
--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor --pf-global--palette--black-500 $pf-color-black-500 #8a8d90
	.pf-c-slider	--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor	#4f5255
--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor --pf-global--palette--black-700 $pf-color-black-700 #4f5255
	.pf-c-slider	--pf-c-slider--m-disabled__thumb--BackgroundColor	#4f5255
--pf-c-slider--m-disabled__thumb--BackgroundColor --pf-global--palette--black-700 $pf-color-black-700 #4f5255
	.pf-c-slider.pf-m-disabled	--pf-c-slider__rail-track--before--fill--BackgroundColor	#8a8d90
--pf-c-slider__rail-track--before--fill--BackgroundColor --pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor --pf-global--palette--black-500 $pf-color-black-500 #8a8d90
	.pf-c-slider.pf-m-disabled	--pf-c-slider__step--m-active__slider-tick--BackgroundColor	#4f5255
--pf-c-slider__step--m-active__slider-tick--BackgroundColor --pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor --pf-global--palette--black-700 $pf-color-black-700 #4f5255
	.pf-c-slider.pf-m-disabled	--pf-c-slider__thumb--BackgroundColor	#4f5255
--pf-c-slider__thumb--BackgroundColor --pf-c-slider--m-disabled__thumb--BackgroundColor --pf-global--palette--black-700 $pf-color-black-700 #4f5255
	.pf-c-slider.pf-m-disabled .pf-c-slider__thumb	--pf-c-slider__thumb--BoxShadow	none
	.pf-c-slider__step.pf-m-active	--pf-c-slider__step-tick--BackgroundColor	#06c
--pf-c-slider__step-tick--BackgroundColor --pf-c-slider__step--m-active__slider-tick--BackgroundColor --pf-global--primary-color--100 $pf-global--primary-color--100 $pf-color-blue-400 #06c
	.pf-c-slider__step:first-child	--pf-c-slider__step-tick--TranslateX	0
--pf-c-slider__step-tick--TranslateX --pf-c-slider__step--first-child__step-tick--TranslateX 0
	.pf-c-slider__step:first-child	--pf-c-slider__step-label--TranslateX	0
--pf-c-slider__step-label--TranslateX --pf-c-slider__step--first-child__step-label--TranslateX 0
	.pf-c-slider__step:last-child	--pf-c-slider__step-tick--TranslateX	-100%
--pf-c-slider__step-tick--TranslateX --pf-c-slider__step--last-child__step-tick--TranslateX -100%
	.pf-c-slider__step:last-child	--pf-c-slider__step-label--TranslateX	-100%
--pf-c-slider__step-label--TranslateX --pf-c-slider__step--last-child__step-label--TranslateX -100%
	.pf-c-slider__thumb:hover	--pf-c-slider__thumb--BoxShadow	0 0 0 2px #fff, 0 0 0 3px #06c
--pf-c-slider__thumb--BoxShadow --pf-c-slider__thumb--hover--BoxShadow --pf-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400 0 0 0 2px #fff, 0 0 0 3px #06c
	.pf-c-slider__thumb:focus	--pf-c-slider__thumb--BoxShadow	0 0 0 2px #fff, 0 0 0 3px #06c
--pf-c-slider__thumb--BoxShadow --pf-c-slider__thumb--focus--BoxShadow --pf-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400 0 0 0 2px #fff, 0 0 0 3px #06c
	.pf-c-slider__thumb:active	--pf-c-slider__thumb--BoxShadow	0 0 0 2px #fff, 0 0 0 3px #06c, 0 0 2px 5px #bee1f4
--pf-c-slider__thumb--BoxShadow --pf-c-slider__thumb--active--BoxShadow --pf-c-slider__thumb--BoxShadow--base, 0 0 2px 5px --pf-global--active-color--200 0 0 0 2px --pf-global--BackgroundColor--100, 0 0 0 3px --pf-global--primary-color--100, 0 0 2px 5px $pf-global--active-color--200 0 0 0 2px $pf-global--BackgroundColor--100, 0 0 0 3px $pf-global--primary-color--100, 0 0 2px 5px $pf-global--active-color--200 0 0 0 2px $pf-color-white, 0 0 0 3px $pf-color-blue-400, 0 0 2px 5px $pf-color-blue-100 0 0 0 2px #fff, 0 0 0 3px #06c, 0 0 2px 5px #bee1f4
	.pf-c-slider__value.pf-m-floating	--pf-c-slider__value--MarginLeft	0
	.pf-c-slider__main ~ .pf-c-slider__actions	--pf-c-slider__actions--MarginRight	0

View source on GitHub

QUICKLINKS

CONTRIBUTE

STAY IN TOUCH

Privacy statement Terms of use All policies and guidelines