Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="slider" | .pf-v5-c-slider__thumb | Identifies the element as a slider. Required |
tabindex="0" | .pf-v5-c-slider__thumb | Includes the slider thumb in the page tab sequence. Note: only for use with non-disabled slider. Required |
aria-disabled="true" | .pf-v5-c-slider.pf-m-disabled .pf-v5-c-slider__thumb | Indicates that the slider thumb is disabled. Required |
aria-valuemin="[value]" | .pf-v5-c-slider__thumb | Specifies the minimum value of the slider. Required |
aria-valuemax="[value]" | .pf-v5-c-slider__thumb | Specifies the maximum value of the slider. Required |
aria-valuenow="[value]" | .pf-v5-c-slider__thumb | Specifies the current value of the slider. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-v5-c-slider | <div> | Initiates the slider component. Required |
.pf-v5-c-slider__main | <div> | Initiates the slider main element. Required |
.pf-v5-c-slider__rail | <div> | Initiates the slider rail. Required |
.pf-v5-c-slider__rail-track | <div> | Initiates the slider rail track. Required |
.pf-v5-c-slider__steps | <div> | Initiates the slider steps. |
.pf-v5-c-slider__step | <div> | Initiates a slider step. |
.pf-v5-c-slider__step-tick | <div> | Initiates a slider step tick. |
.pf-v5-c-slider__step-label | <div> | Initiates a slider step label. |
.pf-v5-c-slider__thumb | <div> | Initiates the slider thumb. Required |
.pf-v5-c-slider__value | <div> | Initiates the slider value. |
.pf-v5-c-slider__actions | <div> | Initiates the slider actions. |
.pf-m-disabled | .pf-v5-c-slider | Modifies the slider for the disabled state. |
.pf-m-floating | .pf-v5-c-slider__thumb | Modifies the slider value to float above the thumb. |
--pf-v5-c-slider--value | .pf-v5-c-slider | Applies appropriate slider styles based on the current value. Required |
CSS variables
| Expand or collapse column | Selector | Variable | Value | |
|---|---|---|---|---|
| .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__rail--PaddingTop --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 1rem | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__rail--PaddingBottom | 1rem | ||
--pf-v5-c-slider__rail--PaddingBottom --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 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__rail-track--before--base--BackgroundColor --pf-v5-global--BorderColor--100 $pf-v5-global--BorderColor--100 $pf-v5-color-black-300 #d2d2d2 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__rail-track--before--fill--BackgroundColor | #2b9af3 | ||
--pf-v5-c-slider__rail-track--before--fill--BackgroundColor --pf-v5-global--active-color--300 $pf-v5-global--active-color--300 $pf-v5-color-blue-300 #2b9af3 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__rail-track--before--BorderRadius | 30em | ||
--pf-v5-c-slider__rail-track--before--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop | 0 | ||
--pf-v5-c-slider__rail-track--before--fill--BackgroundColor--gradient-stop --pf-v5-c-slider--value 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__steps--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__steps--Height | 0.875rem | ||
--pf-v5-c-slider__steps--Height --pf-v5-c-slider__steps--FontSize --pf-v5-global--FontSize--sm $pf-v5-global--FontSize--sm pf-font-prem(14px) 0.875rem | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__step-tick--Top | 1rem | ||
--pf-v5-c-slider__step-tick--Top --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 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__step-tick--BackgroundColor --pf-v5-global--BorderColor--200 $pf-v5-global--BorderColor--200 $pf-v5-color-black-500 #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__step-tick--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 30em | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor | #06c | ||
--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #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__step-label--Top calc(--pf-v5-global--spacer--xl + --pf-v5-c-slider__rail-track--Height) calc($pf-v5-global--spacer--xl + 0.25rem) calc(pf-size-prem(32px) + 0.25rem) 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__thumb--Top calc(--pf-v5-c-slider__rail-track--Height / 2 + --pf-v5-global--spacer--md) calc(0.25rem / 2 + $pf-v5-global--spacer--md) calc(0.25rem / 2 + pf-size-prem(16px)) 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__thumb--Left --pf-v5-c-slider--value 0 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__thumb--BackgroundColor | #06c | ||
--pf-v5-c-slider__thumb--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #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__thumb--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 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__thumb--BoxShadow--base 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400 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__thumb--hover--BoxShadow --pf-v5-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400 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__thumb--focus--BoxShadow --pf-v5-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400 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__thumb--active--BoxShadow --pf-v5-c-slider__thumb--BoxShadow--base,
0 0 2px 5px --pf-v5-global--active-color--200 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100,
0 0 2px 5px $pf-v5-global--active-color--200 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100,
0 0 2px 5px $pf-v5-global--active-color--200 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400,
0 0 2px 5px $pf-v5-color-blue-100 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__thumb--before--Width --pf-v5-global--target-size--MinWidth $pf-v5-global--target-size--MinWidth 44px | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__thumb--before--Height | 44px | ||
--pf-v5-c-slider__thumb--before--Height --pf-v5-global--target-size--MinHeight $pf-v5-global--target-size--MinHeight 44px | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__thumb--before--BorderRadius | 30em | ||
--pf-v5-c-slider__thumb--before--BorderRadius --pf-v5-global--BorderRadius--lg $pf-v5-global--BorderRadius--lg 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__value--MarginLeft --pf-v5-global--spacer--md $pf-v5-global--spacer--md pf-size-prem(16px) 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__value--c-form-control--Width calc(--pf-v5-c-slider__value--c-form-control--width-base + (--pf-v5-c-slider__value--c-form-control--width-chars * 1ch)) 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__value--m-floating--Left --pf-v5-c-slider--value 0 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__value--m-floating--ZIndex | 200 | ||
--pf-v5-c-slider__value--m-floating--ZIndex --pf-v5-global--ZIndex--sm $pf-v5-global--ZIndex--sm 200 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__actions--MarginRight | 0.5rem | ||
--pf-v5-c-slider__actions--MarginRight --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-slider | --pf-v5-c-slider__main--actions--MarginLeft | 0.5rem | ||
--pf-v5-c-slider__main--actions--MarginLeft --pf-v5-global--spacer--sm $pf-v5-global--spacer--sm pf-size-prem(8px) 0.5rem | ||||
| .pf-v5-c-slider | --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor | #8a8d90 | ||
--pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor --pf-v5-global--palette--black-500 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor | #4f5255 | ||
--pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #4f5255 | ||||
| .pf-v5-c-slider | --pf-v5-c-slider--m-disabled__thumb--BackgroundColor | #4f5255 | ||
--pf-v5-c-slider--m-disabled__thumb--BackgroundColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #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__rail-track--before--fill--BackgroundColor --pf-v5-c-slider--m-disabled__rail-track--before--fill--BackgroundColor --pf-v5-global--palette--black-500 $pf-v5-color-black-500 #8a8d90 | ||||
| .pf-v5-c-slider.pf-m-disabled | --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor | #4f5255 | ||
--pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor --pf-v5-c-slider--m-disabled__step--m-active__slider-tick--BackgroundColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #4f5255 | ||||
| .pf-v5-c-slider.pf-m-disabled | --pf-v5-c-slider__thumb--BackgroundColor | #4f5255 | ||
--pf-v5-c-slider__thumb--BackgroundColor --pf-v5-c-slider--m-disabled__thumb--BackgroundColor --pf-v5-global--palette--black-700 $pf-v5-color-black-700 #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-tick--BackgroundColor --pf-v5-c-slider__step--m-active__slider-tick--BackgroundColor --pf-v5-global--primary-color--100 $pf-v5-global--primary-color--100 $pf-v5-color-blue-400 #06c | ||||
| .pf-v5-c-slider__step:first-child | --pf-v5-c-slider__step-tick--TranslateX | 0 | ||
--pf-v5-c-slider__step-tick--TranslateX --pf-v5-c-slider__step--first-child__step-tick--TranslateX 0 | ||||
| .pf-v5-c-slider__step:first-child | --pf-v5-c-slider__step-label--TranslateX | 0 | ||
--pf-v5-c-slider__step-label--TranslateX --pf-v5-c-slider__step--first-child__step-label--TranslateX 0 | ||||
| .pf-v5-c-slider__step:last-child | --pf-v5-c-slider__step-tick--TranslateX | -100% | ||
--pf-v5-c-slider__step-tick--TranslateX --pf-v5-c-slider__step--last-child__step-tick--TranslateX -100% | ||||
| .pf-v5-c-slider__step:last-child | --pf-v5-c-slider__step-label--TranslateX | -100% | ||
--pf-v5-c-slider__step-label--TranslateX --pf-v5-c-slider__step--last-child__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--BoxShadow --pf-v5-c-slider__thumb--hover--BoxShadow --pf-v5-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400 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--BoxShadow --pf-v5-c-slider__thumb--focus--BoxShadow --pf-v5-c-slider__thumb--BoxShadow--base 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400 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__thumb--BoxShadow --pf-v5-c-slider__thumb--active--BoxShadow --pf-v5-c-slider__thumb--BoxShadow--base,
0 0 2px 5px --pf-v5-global--active-color--200 0 0 0 2px --pf-v5-global--BackgroundColor--100,
0 0 0 3px --pf-v5-global--primary-color--100,
0 0 2px 5px $pf-v5-global--active-color--200 0 0 0 2px $pf-v5-global--BackgroundColor--100,
0 0 0 3px $pf-v5-global--primary-color--100,
0 0 2px 5px $pf-v5-global--active-color--200 0 0 0 2px $pf-v5-color-white,
0 0 0 3px $pf-v5-color-blue-400,
0 0 2px 5px $pf-v5-color-blue-100 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
