PatternFly

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

Continuous

Value input


%

%

Thumb value input

%

Actions



%


%

Disabled



%

Documentation

Accessibility

Attribute
Applied to
Outcome
role="slider"
.pf-v5-c-slider__thumb
Identifies the element as a slider. Required
tabindex="0"
.pf-v5-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-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb
Indicates that the slider thumb is disabled. Required
aria-valuemin="[value]"
.pf-v5-c-slider__thumb
Specifies the minimum value of the slider. Required
aria-valuemax="[value]"
.pf-v5-c-slider__thumb
Specifies the maximum value of the slider. Required
aria-valuenow="[value]"
.pf-v5-c-slider__thumb
Specifies the current value of the slider. Required

Usage

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

CSS variables

Expand or collapse columnSelectorVariableValue
.pf-v5-c-slider--pf-v5-c-slider--value
0
.pf-v5-c-slider--pf-v5-c-slider__step--Left
0
.pf-v5-c-slider--pf-v5-c-slider__rail--PaddingTop
1rem
.pf-v5-c-slider--pf-v5-c-slider__rail--PaddingBottom
1rem
.pf-v5-c-slider--pf-v5-c-slider__rail-track--Height
0.25rem
.pf-v5-c-slider--pf-v5-c-slider__rail-track--before--base--BackgroundColor
#d2d2d2
.pf-v5-c-slider--pf-v5-c-slider__rail-track--before--fill--BackgroundColor
#2b9af3
.pf-v5-c-slider--pf-v5-c-slider__rail-track--before--BorderRadius
30em
.pf-v5-c-slider--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop
0
.pf-v5-c-slider--pf-v5-c-slider__rail-track--before--fill--direction
right
.pf-v5-c-slider--pf-v5-c-slider__steps--FontSize
0.875rem
.pf-v5-c-slider--pf-v5-c-slider__steps--Height
0.875rem
.pf-v5-c-slider--pf-v5-c-slider__step-tick--Top
1rem
.pf-v5-c-slider--pf-v5-c-slider__step-tick--Width
0.25rem
.pf-v5-c-slider--pf-v5-c-slider__step-tick--Height
0.25rem
.pf-v5-c-slider--pf-v5-c-slider__step-tick--BackgroundColor
#8a8d90
.pf-v5-c-slider--pf-v5-c-slider__step-tick--TranslateX
-50%
.pf-v5-c-slider--pf-v5-c-slider__step-tick--BorderRadius
30em
.pf-v5-c-slider--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor
#06c
.pf-v5-c-slider--pf-v5-c-slider__step--first-child__step-tick--TranslateX
0
.pf-v5-c-slider--pf-v5-c-slider__step--last-child__step-tick--TranslateX
-100%
.pf-v5-c-slider--pf-v5-c-slider__step-label--TranslateX
-50%
.pf-v5-c-slider--pf-v5-c-slider__step-label--Top
calc(2rem + 0.25rem)
.pf-v5-c-slider--pf-v5-c-slider__step--first-child__step-label--TranslateX
0
.pf-v5-c-slider--pf-v5-c-slider__step--last-child__step-label--TranslateX
-100%
.pf-v5-c-slider--pf-v5-c-slider__thumb--Top
calc(0.25rem / 2 + 1rem)
.pf-v5-c-slider--pf-v5-c-slider__thumb--Width
1rem
.pf-v5-c-slider--pf-v5-c-slider__thumb--Height
1rem
.pf-v5-c-slider--pf-v5-c-slider__thumb--Left
0
.pf-v5-c-slider--pf-v5-c-slider__thumb--BackgroundColor
#06c
.pf-v5-c-slider--pf-v5-c-slider__thumb--TranslateX
-50%
.pf-v5-c-slider--pf-v5-c-slider__thumb--TranslateY
-50%
.pf-v5-c-slider--pf-v5-c-slider__thumb--BorderRadius
30em
.pf-v5-c-slider--pf-v5-c-slider__thumb--BoxShadow--base
0 0 0 2px #fff, 0 0 0 3px #06c
.pf-v5-c-slider--pf-v5-c-slider__thumb--hover--BoxShadow
0 0 0 2px #fff, 0 0 0 3px #06c
.pf-v5-c-slider--pf-v5-c-slider__thumb--focus--BoxShadow
0 0 0 2px #fff, 0 0 0 3px #06c
.pf-v5-c-slider--pf-v5-c-slider__thumb--active--BoxShadow
0 0 0 2px #fff, 0 0 0 3px #06c, 0 0 2px 5px #bee1f4
.pf-v5-c-slider--pf-v5-c-slider__thumb--before--Width
44px
.pf-v5-c-slider--pf-v5-c-slider__thumb--before--Height
44px
.pf-v5-c-slider--pf-v5-c-slider__thumb--before--BorderRadius
30em
.pf-v5-c-slider--pf-v5-c-slider__thumb--before--TranslateX
-50%
.pf-v5-c-slider--pf-v5-c-slider__thumb--before--TranslateY
-50%
.pf-v5-c-slider--pf-v5-c-slider__value--MarginLeft
1rem
.pf-v5-c-slider--pf-v5-c-slider__value--c-form-control--width-base
3.5ch
.pf-v5-c-slider--pf-v5-c-slider__value--c-form-control--width-chars
3
.pf-v5-c-slider--pf-v5-c-slider__value--c-form-control--Width
calc(3.5ch + (3 * 1ch))
.pf-v5-c-slider--pf-v5-c-slider__value--m-floating--TranslateX
-50%
.pf-v5-c-slider--pf-v5-c-slider__value--m-floating--TranslateY
-100%
.pf-v5-c-slider--pf-v5-c-slider__value--m-floating--Left
0
.pf-v5-c-slider--pf-v5-c-slider__value--m-floating--ZIndex
200
.pf-v5-c-slider--pf-v5-c-slider__actions--MarginRight
0.5rem
.pf-v5-c-slider--pf-v5-c-slider__main--actions--MarginLeft
0.5rem
.pf-v5-c-slider--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor
#8a8d90
.pf-v5-c-slider--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor
#4f5255
.pf-v5-c-slider--pf-v5-c-slider--m-disabled__thumb--BackgroundColor
#4f5255
:where(.pf-v5-m-dir-rtl, [dir=rtl]) .pf-v5-c-slider--pf-v5-c-slider__rail-track--before--fill--direction
left
.pf-v5-c-slider.pf-m-disabled--pf-v5-c-slider__rail-track--before--fill--BackgroundColor
#8a8d90
.pf-v5-c-slider.pf-m-disabled--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor
#4f5255
.pf-v5-c-slider.pf-m-disabled--pf-v5-c-slider__thumb--BackgroundColor
#4f5255
.pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb--pf-v5-c-slider__thumb--BoxShadow
none
.pf-v5-c-slider__step.pf-m-active--pf-v5-c-slider__step-tick--BackgroundColor
#06c
.pf-v5-c-slider__step:first-child--pf-v5-c-slider__step-tick--TranslateX
0
.pf-v5-c-slider__step:first-child--pf-v5-c-slider__step-label--TranslateX
0
.pf-v5-c-slider__step:last-child--pf-v5-c-slider__step-tick--TranslateX
-100%
.pf-v5-c-slider__step:last-child--pf-v5-c-slider__step-label--TranslateX
-100%
.pf-v5-c-slider__thumb:hover--pf-v5-c-slider__thumb--BoxShadow
0 0 0 2px #fff, 0 0 0 3px #06c
.pf-v5-c-slider__thumb:focus--pf-v5-c-slider__thumb--BoxShadow
0 0 0 2px #fff, 0 0 0 3px #06c
.pf-v5-c-slider__thumb:active--pf-v5-c-slider__thumb--BoxShadow
0 0 0 2px #fff, 0 0 0 3px #06c, 0 0 2px 5px #bee1f4
.pf-v5-c-slider__value.pf-m-floating--pf-v5-c-slider__value--MarginLeft
0
.pf-v5-c-slider__main ~ .pf-v5-c-slider__actions--pf-v5-c-slider__actions--MarginRight
0

View source on GitHub