Info alert:Beta feature
This Beta component is currently under review and is still open for further evolution. It is available for use in product. Beta components are considered for promotion on a quarterly basis. Please join in and give us your feedback or submit any questions on the PatternFly forum or via Slack. To learn more go to our Beta components page on GitHub.
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
