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.
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. |
| 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. | |
| 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
