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


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)

Continuous

Slider Value is: 50.00


Slider Value is: 50.00

Value input


%

%

Thumb value input

%

Actions

Slider Value is: 50



%

Disabled

Slider Value is: 4

Props

Slider

NameTypeRequiredDefaultDescription
areCustomStepsContinuousbooleanNofalseFlag indicating if the slider is is discrete for custom steps. This will cause the slider to snap to the closest value.
classNamestringNoAdditional classes added to the spinner.
customStepsSliderStepObject[]NoArray of custom slider step objects (value and label of each step) for the slider.
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
isDisabledbooleanNofalseAdds disabled styling and disables the slider and the input component is present
isInputVisiblebooleanNofalseFlag to show value input field
leftActionsReact.ReactNodeNoActions placed to the left of the slider
maxnumberNo100The maximum permitted value
minnumberNo0Minimum permitted value
onChange(value: number, inputValue?: number) => voidNoValue change callback. This is called when the slider value changes
rightActionsReact.ReactNodeNoActions placed to the right of the slider
showBoundariesbooleanNotrueFlag to indicate if boundaries should be shown for slider that does not have custom steps
showTicksbooleanNofalseFlag to indicate if ticks should be shown for slider that does not have custom steps
stepnumberNo1The step interval
thumbAriaLabelstringNo'Value'
valuenumberNo0Current 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--pf-c-slider--m-disabled__rail-track--before--fill--BackgroundColor
#8a8d90
.pf-c-slider--pf-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor
#4f5255
.pf-c-slider--pf-c-slider--m-disabled__thumb--BackgroundColor
#4f5255
.pf-c-slider.pf-m-disabled--pf-c-slider__rail-track--before--fill--BackgroundColor
#8a8d90
.pf-c-slider.pf-m-disabled--pf-c-slider__step--m-active__slider-tick--BackgroundColor
#4f5255
.pf-c-slider.pf-m-disabled--pf-c-slider__thumb--BackgroundColor
#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: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