Skip to content
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

Slider value is: 50


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

Types

SliderOnChangeEvent

The slider's onChange prop accepts an event parameter of the following types:

  • React.MouseEvent
  • React.KeyboardEvent
  • React.FormEvent<HTMLInputElement>
  • React.TouchEvent
  • React.FocusEvent<HTMLInputElement>

The SliderOnChangeEvent type is a union of the above event types, and can be imported and used in your code like in the following code snippet:

import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';

<Slider onChange={(event: SliderOnChangeEvent) => {}} />

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.
endActionsReact.ReactNodeActions placed at the end of 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' | 'end''end'Position of the input. Note "right" is deprecated. Use "end" instead
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.
Deprecated: leftActionsReact.ReactNodeUse startActions instead. Actions placed at the start of the slider.
maxnumber100The maximum permitted value.
minnumber0The minimum permitted value.
onChange( event: SliderOnChangeEvent, value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => voidValue change callback. This is called when the slider value changes.
Deprecated: rightActionsReact.ReactNodeUse endActions instead. Actions 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.
startActionsReact.ReactNodeActions placed at the start of the slider.
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

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
Red Hat
Copyright © 2014-2024 Red Hat, Inc.
Privacy statementTerms of useAll policies and guidelines