Skip to content
Patternfly Logo

Slider

Info alert:Beta feature

This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.

Examples

Discrete

Slider Value is: 4

Continuous

Slider Value is: 50.00


Value input


%

%

Thumb value input

%

Actions

Slider Value is: 50



%

Props

Slider

NameTypeRequiredDefaultDescription
classNamestringNoAdditional classes added to the spinner.
currentValuenumberNo0Current value
inputAriaLabelstringNo'Slider value input'Aria label for the input field
inputLabelstring | numberNoLabel that is place after the input field
inputPosition'aboveThumb' | 'right'No'right'Position of the input
inputValuenumberNo0Value displayed in the input field
isDiscretebooleanNofalseFlag indicating if the slider is is discrete
isInputDisabledbooleanNoFlag indicating input is disabled
isInputVisiblebooleanNofalseFlag to show value input field
leftActionsReact.ReactNodeNoActions placed to the left of the slider
onChange(value: number) => voidNoValue input callback. Called when enter is hit while in input filed or focus shifts from input field
onValueChange(value: number) => voidNoValue change callback. This is called when the slider value changes
rightActionsReact.ReactNodeNoActions placed to the right of the slider
stepsSliderStepObject[]NoArray of slider step objects (value and label of each step) for the slider.
thumbAriaLabelstringNo'Value'

SliderStepObject

NameTypeRequiredDefaultDescription
isLabelHiddenNo type infoNoFlag to hide the label
labelNo type infoYesThe display label for the step value. THis is also used for the aria-valuetext
valueNo type infoYesValue of the step. This value is a percentage of the slider where the tick is drawn.

CSS variables

.pf-c-slider--pf-c-slider__rail--PaddingTop
1rem
.pf-c-slider--pf-c-slider__rail--PaddingBottom
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--pf-c-slider__rail-track--before--fill--BackgroundColor
#2b9af3
.pf-c-slider--pf-c-slider__rail-track--before--BorderRadius
30em
.pf-c-slider--pf-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop
undefined
.pf-c-slider--pf-c-slider__steps--FontSize
0.875rem
.pf-c-slider--pf-c-slider__steps--Height
0.875rem
.pf-c-slider--pf-c-slider__step-tick--Top
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--pf-c-slider__step-tick--TranslateX
-50%
.pf-c-slider--pf-c-slider__step-tick--BorderRadius
30em
.pf-c-slider--pf-c-slider__step--m-active__slider-tick--BackgroundColor
#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--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--pf-c-slider__thumb--Width
1rem
.pf-c-slider--pf-c-slider__thumb--Height
1rem
.pf-c-slider--pf-c-slider__thumb--Left
undefined
.pf-c-slider--pf-c-slider__thumb--BackgroundColor
#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--pf-c-slider__thumb--BoxShadow--base
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--pf-c-slider__thumb--focus--BoxShadow
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--pf-c-slider__thumb--before--Width
44px
.pf-c-slider--pf-c-slider__thumb--before--Height
44px
.pf-c-slider--pf-c-slider__thumb--before--BorderRadius
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--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--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
undefined
.pf-c-slider--pf-c-slider__value--m-floating--ZIndex
200
.pf-c-slider--pf-c-slider__actions--MarginRight
0.5rem
.pf-c-slider--pf-c-slider__main--actions--MarginLeft
0.5rem
.pf-c-slider__step.pf-m-active--pf-c-slider__step-tick--BackgroundColor
#06c
.pf-c-slider__step:first-child--pf-c-slider__step-tick--TranslateX
0
.pf-c-slider__step:first-child--pf-c-slider__step-label--TranslateX
0
.pf-c-slider__step:last-child--pf-c-slider__step-tick--TranslateX
-100%
.pf-c-slider__step:last-child--pf-c-slider__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:focus--pf-c-slider__thumb--BoxShadow
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__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