Skip to content
PatternFly logo

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

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)

Slider value is: 3

(max = 5, custom steps)

Slider value is: 25

(min = 12, max = 86, custom steps with non linear data)

Continuous

Slider Value is: 50


Slider value is: 50

Value input


%

%

Thumb value input

%

Actions

Slider value is: 50



%

Disabled

Slider value is: 4

Props

Slider

The main slider component.
*required
NameTypeDefaultDescription
areCustomStepsContinuousbooleanfalseFlag indicating if the slider is discrete for custom steps. This will cause the slider to snap to the closest value.
aria-describedbystringOne or more id's to use for the slider thumb's accessible description.
aria-labelledbystringOne or more id's to use for the slider thumb's accessible label.
classNamestringAdditional classes added to the slider.
customStepsSliderStepObject[]Array of custom slider step objects (value and label of each step) for the slider.
hasTooltipOverThumbbooleanfalse
inputAriaLabelstring'Slider value input'Accessible label for the input field.
inputLabelstring | numberText label 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 if present.
isInputVisiblebooleanfalseFlag to show value input field.
leftActionsReact.ReactNodeActions placed to the left of the slider.
maxnumber100The maximum permitted value.
minnumber0The minimum 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 of the slider.

SliderStepObject

Properties for creating custom steps in a slider. These properties should be passed in as an object within an array to the slider component's customSteps property.
*required
NameTypeDefaultDescription
labelrequiredstringThe display label for the step value. This is also used for the aria-valuetext attribute.
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