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 columnSelectorVariableValue
: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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__rail--PaddingBlockEnd
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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__rail-track--before--fill--BackgroundColor
(In light theme) #4394e5
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__rail-track--before--BorderRadius
4px
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop
0
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__steps--FontSize
0.875rem
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__steps--Height
0.875rem
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__step-tick--InsetBlockStart
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
: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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor
(In light theme) #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)
: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)
: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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__thumb--BackgroundColor
(In light theme) #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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__thumb--BoxShadow--base
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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__thumb--focus--BoxShadow
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
: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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__thumb--before--BorderRadius
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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__value--c-form-control--width-base
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)
: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
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__value--m-floating--ZIndex
200
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__actions--MarginInlineEnd
0.5rem
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider__main--actions--MarginInlineStart
0.5rem
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor
(In light theme) #c7c7c7
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor
(In light theme) #a3a3a3
:where(:root, .pf-v6-c-slider)--pf-v6-c-slider--m-disabled__thumb--BackgroundColor
(In light theme) #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.pf-m-disabled--pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor
(In light theme) #a3a3a3
.pf-v6-c-slider.pf-m-disabled--pf-v6-c-slider__thumb--BackgroundColor
(In light theme) #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:first-child--pf-v6-c-slider__step-tick--TranslateX
0
.pf-v6-c-slider__step:first-child--pf-v6-c-slider__step-label--TranslateX
0
.pf-v6-c-slider__step:last-child--pf-v6-c-slider__step-tick--TranslateX
-100%
.pf-v6-c-slider__step:last-child--pf-v6-c-slider__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:focus--pf-v6-c-slider__thumb--BoxShadow
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__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