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
Props
Slider
| Name | Type | Default | Description |
|---|---|---|---|
| areCustomStepsContinuous | boolean | false | Flag indicating if the slider is 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 description | |
| aria-labelledby | string | One or more id's to use for the slider thumb label | |
| className | string | Additional classes added to the spinner. | |
| customSteps | SliderStepObject[] | Array of custom slider step objects (value and label of each step) for the slider. | |
| hasTooltipOverThumb | boolean | false | |
| inputAriaLabel | string | 'Slider value input' | Aria label for the input field |
| inputLabel | string | number | Label that is place after the input field | |
| inputPosition | 'aboveThumb' | 'right' | 'right' | Position of the input |
| inputValue | number | 0 | Value displayed in the input field |
| isDisabled | boolean | false | Adds disabled styling and disables the slider and the input component is present |
| isInputVisible | boolean | false | Flag to show value input field |
| leftActions | React.ReactNode | Actions placed to the left of the slider | |
| max | number | 100 | The maximum permitted value |
| min | number | 0 | Minimum permitted value |
| onChange | ( value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => void | Value change callback. This is called when the slider value changes | |
| rightActions | React.ReactNode | 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 |
| step | number | 1 | The step interval |
| thumbAriaLabel | string | 'Value' | |
| value | number | 0 | Current value |
SliderStepObject
| Name | Type | Default | Description |
|---|---|---|---|
| labelrequired | string | The display label for the step value. This is also used for the aria-valuetext | |
| 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
| .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
