Skip to content
Patternfly Logo

Slider

Info alert:Beta feature

This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack.

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

*required
NameTypeDefaultDescription
areCustomStepsContinuousbooleanfalseFlag indicating if the slider is is discrete for custom steps. This will cause the slider to snap to the closest value.
classNamestringAdditional classes added to the spinner.
customStepsSliderStepObject[]Array of custom slider step objects (value and label of each step) for the slider.
inputAriaLabelstring'Slider value input'Aria label for the input field
inputLabelstring | numberLabel that is place after the input field
inputPosition'aboveThumb' | 'right''right'Position of the input
inputValuenumber0Value displayed in the input field
isDisabledbooleanfalseAdds disabled styling and disables the slider and the input component is present
isInputVisiblebooleanfalseFlag to show value input field
leftActionsReact.ReactNodeActions placed to the left of the slider
maxnumber100The maximum permitted value
minnumber0Minimum permitted value
onChange( value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => voidValue change callback. This is called when the slider value changes
rightActionsReact.ReactNodeActions placed to the right of the slider
showBoundariesbooleantrueFlag to indicate if boundaries should be shown for slider that does not have custom steps
showTicksbooleanfalseFlag to indicate if ticks should be shown for slider that does not have custom steps
stepnumber1The step interval
thumbAriaLabelstring'Value'
valuenumber0Current value

SliderStepObject

*required
NameTypeDefaultDescription
labelrequiredstringThe display label for the step value. This is also used for the aria-valuetext
valuerequirednumberValue of the step. This value is a percentage of the slider where the tick is drawn.
isLabelHiddenbooleanFlag to hide the label

CSS variables

.pf-c-slider--pf-c-slider--value
0
.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
0
.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
0
.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
0
.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