Examples
Custom step tooltip
You can customize the content of the tooltip by passing the tooltipContent property. By default this tooltip will act as a description to the slider thumb, and thus shouldn't include critical information about the current slider step unless that information is part of the step's aria-valuetext.
If instead you want the tooltip to act as the human-readable value of the slider step - such as when all slider step labels are hidden - you must also pass the thumbAriaValueText property with the same string value as the tooltipContent. Additionally, you should pass the tooltip props object {aria: 'none', 'aria-live': 'off'} to tooltipProps in order to help prevent duplicate announcement from assistive technologies.
Types
SliderOnChangeEvent
The slider's onChange prop accepts an event parameter of the following types:
React.MouseEventReact.KeyboardEventReact.FormEvent<HTMLInputElement>React.TouchEventReact.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
| Name | Type | Default | Description |
|---|---|---|---|
| areCustomStepsContinuous | boolean | false | Flag indicating if the slider is discrete for custom steps. This will cause the slider to snap to the closest value. |
| aria-describedby | string | One or more id's to use for the slider thumb's accessible description. | |
| aria-labelledby | string | One or more id's to use for the slider thumb's accessible label. | |
| className | string | Additional classes added to the slider. | |
| customSteps | SliderStepObject[] | Array of custom slider step objects (value and label of each step) for the slider. | |
| endActions | React.ReactNode | Actions placed at the end of the slider. | |
| hasTooltipOverThumb | boolean | false | Enables a tooltip over the silder thumb. Defaults to the current value, or tooltipContent if provided. |
| inputAriaLabel | string | 'Slider value input' | Accessible label for the input field. |
| inputLabel | string | number | Text label that is place after the input field. | |
| inputPosition | 'aboveThumb' | 'right' | 'end' | 'end' | Position of the input. Note "right" is deprecated. Use "end" instead |
| inputValue | number | 0 | Value displayed in the input field. |
| isDisabled | boolean | false | Adds disabled styling, and disables the slider and the input component if present. |
| isInputLive | boolean | false | Flag indicating if the input value should also update the slider value as the user types. When false, the slider will update its value on blur or enter key press. |
| isInputVisible | boolean | false | Flag to show value input field. |
| Deprecated: leftActions | React.ReactNode | Use startActions instead. Actions placed at the start of the slider. | |
| max | number | 100 | The maximum permitted value. |
| min | number | 0 | The minimum permitted value. |
| onChange | ( event: SliderOnChangeEvent, value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => void | Value change callback. This is called when the slider value changes. | |
| Deprecated: rightActions | React.ReactNode | Use endActions instead. Actions placed to the right of the slider. | |
| showBoundaries | boolean | true | Flag to indicate if boundaries should be shown for slider that does not have custom steps. |
| showTicks | boolean | false | Flag to indicate if ticks should be shown for slider that does not have custom steps. |
| startActions | React.ReactNode | Actions placed at the start of the slider. | |
| step | number | 1 | The step interval. |
| thumbAriaLabel | string | 'Value' | Accessible label for the slider thumb. |
| thumbAriaValueText | string | Accessible text for the current value of the slider. Defaults to the current value. | |
| tooltipContent | React.ReactNode | Content of the tooltip over the slider thumb. Defaults to the current value. | |
| tooltipProps | Omit<TooltipProps, 'content'> | Additional props passed to the tooltip. | |
| value | number | 0 | Current value of the slider. |
SliderStepObject
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | The display label for the step value. This is also used for the aria-valuetext attribute. | |
| valuerequired | number | Value of the step. This value is a percentage of the slider where the tick is drawn. | |
| isLabelHidden | boolean | Flag to hide the label. |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .pf-v6-c-slider | --pf-v6-c-slider--value | 0 | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step--InsetInlineStart | 0 | ||
| .pf-v6-c-slider | --pf-v6-c-slider__rail--PaddingBlockStart | 1rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail--PaddingBlockEnd | 1rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--Height | 0.25rem | ||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--base--BackgroundColor | (In light theme) #e0e0e0 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--fill--BackgroundColor | (In light theme) #4394e5 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--BorderColor | transparent | ||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--BorderRadius | 4px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop | 0 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__steps--FontSize | 0.875rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__steps--Height | 0.875rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--InsetBlockStart | 1rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--Width | 0.15rem | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--Height | 0.25rem | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--BackgroundColor | (In light theme) #1f1f1f | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--TranslateX | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--BorderColor | transparent | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step-tick--BorderRadius | 0px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step--first-child__step-tick--TranslateX | 0 | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step--last-child__step-tick--TranslateX | -100% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step-label--TranslateX | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step-label--InsetBlockStart | calc(2rem + 0.25rem) | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__step--first-child__step-label--TranslateX | 0 | ||
| .pf-v6-c-slider | --pf-v6-c-slider__step--last-child__step-label--TranslateX | -100% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--InsetBlockStart | calc(0.25rem / 2 + 1rem) | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--Width | 1rem | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--Height | 1rem | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--InsetInlineStart | 0 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--BackgroundColor | (In light theme) #0066cc | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--TranslateX | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--TranslateY | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--BorderWidth | 0px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--BorderColor | transparent | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--BorderRadius | 24px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--BoxShadow--base | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--hover--BoxShadow | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--focus--BoxShadow | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--active--BoxShadow | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc,
0 0 2px 5px #92c5f9 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--before--Width | 44px | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--before--Height | 44px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--before--BorderRadius | 24px | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--before--TranslateX | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__thumb--before--TranslateY | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__value--MarginInlineStart | 1rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__value--c-form-control--width-base | calc(1rem + 1rem + 1.25rem) | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__value--c-form-control--width-chars | 3 | ||
| .pf-v6-c-slider | --pf-v6-c-slider__value--c-form-control--Width | calc(calc(1rem + 1rem + 1.25rem) + 3 * 1ch) | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__value--m-floating--TranslateX | -50% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__value--m-floating--TranslateY | -100% | ||
| .pf-v6-c-slider | --pf-v6-c-slider__value--m-floating--InsetInlineStart | 0 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__value--m-floating--ZIndex | 200 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__actions--MarginInlineEnd | 0.5rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__main--actions--MarginInlineStart | 0.5rem | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider--m-disabled__rail-track--before--fill--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider--m-disabled__thumb--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--fill--direction | right | ||
| :where(.pf-v6-m-dir-rtl, [dir=rtl]) .pf-v6-c-slider | --pf-v6-c-slider__rail-track--before--fill--direction | left | ||
| .pf-v6-c-slider.pf-m-disabled | --pf-v6-c-slider__rail-track--before--fill--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-slider.pf-m-disabled | --pf-v6-c-slider__step--m-active__slider-tick--BackgroundColor | (In light theme) #a3a3a3 | ||
| ||||
| .pf-v6-c-slider.pf-m-disabled | --pf-v6-c-slider__thumb--BackgroundColor | (In light theme) #c7c7c7 | ||
| ||||
| .pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb | --pf-v6-c-slider__thumb--BoxShadow | none | ||
| .pf-v6-c-slider__step.pf-m-active | --pf-v6-c-slider__step-tick--BackgroundColor | (In light theme) #ffffff | ||
| ||||
| .pf-v6-c-slider__step:first-child | --pf-v6-c-slider__step-tick--TranslateX | 0 | ||
| ||||
| .pf-v6-c-slider__step:first-child | --pf-v6-c-slider__step-label--TranslateX | 0 | ||
| ||||
| .pf-v6-c-slider__step:last-child | --pf-v6-c-slider__step-tick--TranslateX | -100% | ||
| ||||
| .pf-v6-c-slider__step:last-child | --pf-v6-c-slider__step-label--TranslateX | -100% | ||
| ||||
| .pf-v6-c-slider__thumb:hover | --pf-v6-c-slider__thumb--BoxShadow | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc | ||
| ||||
| .pf-v6-c-slider__thumb:focus | --pf-v6-c-slider__thumb--BoxShadow | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc | ||
| ||||
| .pf-v6-c-slider__thumb:active | --pf-v6-c-slider__thumb--BoxShadow | 0 0 0 2px #ffffff,
0 0 0 3px #0066cc,
0 0 2px 5px #92c5f9 | ||
| ||||
| .pf-v6-c-slider__value.pf-m-floating | --pf-v6-c-slider__value--MarginInlineStart | 0 | ||
| .pf-v6-c-slider__main ~ .pf-v6-c-slider__actions | --pf-v6-c-slider__actions--MarginInlineEnd | 0 | ||