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

Continuous

Value input

Thumb value input

Actions

Disabled

Documentation

Accessibility

Attribute	Applied to	Outcome
`role="slider"`	`.pf-v6-c-slider__thumb`	Identifies the element as a slider. Required
`tabindex="0"`	`.pf-v6-c-slider__thumb`	Includes the slider thumb in the page tab sequence. Note: only for use with non-disabled slider. Required
`aria-disabled="true"`	`.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb`	Indicates that the slider thumb is disabled. Required
`aria-valuemin="[value]"`	`.pf-v6-c-slider__thumb`	Specifies the minimum value of the slider. Required
`aria-valuemax="[value]"`	`.pf-v6-c-slider__thumb`	Specifies the maximum value of the slider. Required
`aria-valuenow="[value]"`	`.pf-v6-c-slider__thumb`	Specifies the current value of the slider. Required

Usage

Class	Applied to	Outcome
`.pf-v6-c-slider`	`<div>`	Initiates the slider component. Required
`.pf-v6-c-slider__main`	`<div>`	Initiates the slider main element. Required
`.pf-v6-c-slider__rail`	`<div>`	Initiates the slider rail. Required
`.pf-v6-c-slider__rail-track`	`<div>`	Initiates the slider rail track. Required
`.pf-v6-c-slider__steps`	`<div>`	Initiates the slider steps.
`.pf-v6-c-slider__step`	`<div>`	Initiates a slider step.
`.pf-v6-c-slider__step-tick`	`<div>`	Initiates a slider step tick.
`.pf-v6-c-slider__step-label`	`<div>`	Initiates a slider step label.
`.pf-v6-c-slider__thumb`	`<div>`	Initiates the slider thumb. Required
`.pf-v6-c-slider__value`	`<div>`	Initiates the slider value.
`.pf-v6-c-slider__actions`	`<div>`	Initiates the slider actions.
`.pf-m-disabled`	`.pf-v6-c-slider`	Modifies the slider for the disabled state.
`.pf-m-floating`	`.pf-v6-c-slider__thumb`	Modifies the slider value to float above the thumb.
`--pf-v6-c-slider--value`	`.pf-v6-c-slider`	Applies appropriate slider styles based on the current value. Required

CSS variables

Expand or collapse column	Selector	Variable	Value
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider--value	0
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step--InsetInlineStart	0
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__rail-track--Height	0.25rem
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__rail-track--before--base--BackgroundColor	(In light theme) #c7c7c7
--pf-v6-c-slider__rail-track--before--base--BackgroundColor --pf-t--global--border--color--default --pf-t--global--border--color--100 --pf-t--color--gray--30 #c7c7c7
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step-tick--Width	0.25rem
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step-tick--Height	0.25rem
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step-tick--BackgroundColor	(In light theme) #707070
--pf-v6-c-slider__step-tick--BackgroundColor --pf-t--global--icon--color--subtle --pf-t--global--icon--color--200 --pf-t--color--gray--50 #707070
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step-tick--TranslateX	-50%
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step-tick--BorderRadius	24px
--pf-v6-c-slider__step-tick--BorderRadius --pf-t--global--border--radius--large --pf-t--global--border--radius--400 24px
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor	(In light theme) #004d99
--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor --pf-t--global--icon--color--brand--clicked --pf-t--global--color--brand--clicked --pf-t--global--color--brand--300 --pf-t--color--blue--60 #004d99
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step--first-child__step-tick--TranslateX	0
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step--last-child__step-tick--TranslateX	-100%
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step-label--TranslateX	-50%
	:where(:root, .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)
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step--first-child__step-label--TranslateX	0
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__step--last-child__step-label--TranslateX	-100%
	:where(:root, .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)
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--Width	1rem
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--Height	1rem
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--InsetInlineStart	0
--pf-v6-c-slider__thumb--InsetInlineStart --pf-v6-c-slider--value 0
	:where(:root, .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
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--TranslateX	-50%
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--TranslateY	-50%
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--before--Width	44px
	:where(:root, .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
	:where(:root, .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
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--before--TranslateX	-50%
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__thumb--before--TranslateY	-50%
	:where(:root, .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
	:where(:root, .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-v6-c-form-control--PaddingInlineStart + --pf-v6-c-form-control--PaddingInlineEnd + 1.25rem) calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base + 1.25rem) 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)
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__value--c-form-control--width-chars	3
	:where(:root, .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-v6-c-form-control--PaddingInlineStart + --pf-v6-c-form-control--PaddingInlineEnd + 1.25rem) + 3 * 1ch) calc(calc(--pf-v6-c-form-control--inset--base + --pf-v6-c-form-control--inset--base + 1.25rem) + 3 * 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)
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__value--m-floating--TranslateX	-50%
	:where(:root, .pf-v6-c-slider)	--pf-v6-c-slider__value--m-floating--TranslateY	-100%
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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
	:where(:root, .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) #004d99
--pf-v6-c-slider__step-tick--BackgroundColor --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor --pf-t--global--icon--color--brand--clicked --pf-t--global--color--brand--clicked --pf-t--global--color--brand--300 --pf-t--color--blue--60 #004d99
	.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