Examples
Documentation
Accessibility
Attribute | Applied to | Outcome |
|---|---|---|
role="slider" | .pf-c-slider__thumb | Identifies the element as a slider. Required |
tabindex="0" | .pf-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-c-slider.pf-m-disabled .pf-c-slider__thumb | Indicates that the slider thumb is disabled. Required |
aria-valuemin="[value]" | .pf-c-slider__thumb | Specifies the minimum value of the slider. Required |
aria-valuemax="[value]" | .pf-c-slider__thumb | Specifies the maximum value of the slider. Required |
aria-valuenow="[value]" | .pf-c-slider__thumb | Specifies the current value of the slider. Required |
Usage
Class | Applied to | Outcome |
|---|---|---|
.pf-c-slider | <div> | Initiates the slider component. Required |
.pf-c-slider__main | <div> | Initiates the slider main element. Required |
.pf-c-slider__rail | <div> | Initiates the slider rail. Required |
.pf-c-slider__rail-track | <div> | Initiates the slider rail track. Required |
.pf-c-slider__steps | <div> | Initiates the slider steps. |
.pf-c-slider__step | <div> | Initiates a slider step. |
.pf-c-slider__step-tick | <div> | Initiates a slider step tick. |
.pf-c-slider__step-label | <div> | Initiates a slider step label. |
.pf-c-slider__thumb | <div> | Initiates the slider thumb. Required |
.pf-c-slider__value | <div> | Initiates the slider value. |
.pf-c-slider__actions | <div> | Initiates the slider actions. |
.pf-m-disabled | .pf-c-slider | Modifies the slider for the disabled state. |
.pf-m-floating | .pf-c-slider__thumb | Modifies the slider value to float above the thumb. |
--pf-c-slider--value | .pf-c-slider | Applies appropriate slider styles based on the current value. Required |
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