Info alert:Beta feature
This Beta component is currently under review, so please join in and give us your feedback on the PatternFly forum.
Examples
Props
Slider
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| className | string | No | Additional classes added to the spinner. | |
| currentValue | number | No | 0 | Current value |
| inputAriaLabel | string | No | 'Slider value input' | Aria label for the input field |
| inputLabel | string | number | No | Label that is place after the input field | |
| inputPosition | 'aboveThumb' | 'right' | No | 'right' | Position of the input |
| inputValue | number | No | 0 | Value displayed in the input field |
| isDiscrete | boolean | No | false | Flag indicating if the slider is is discrete |
| isInputDisabled | boolean | No | Flag indicating input is disabled | |
| isInputVisible | boolean | No | false | Flag to show value input field |
| leftActions | React.ReactNode | No | Actions placed to the left of the slider | |
| onChange | (value: number) => void | No | Value input callback. Called when enter is hit while in input filed or focus shifts from input field | |
| onValueChange | (value: number) => void | No | Value change callback. This is called when the slider value changes | |
| rightActions | React.ReactNode | No | Actions placed to the right of the slider | |
| steps | SliderStepObject[] | No | Array of slider step objects (value and label of each step) for the slider. | |
| thumbAriaLabel | string | No | 'Value' |
SliderStepObject
| Name | Type | Required | Default | Description |
|---|---|---|---|---|
| isLabelHidden | No type info | No | Flag to hide the label | |
| label | No type info | Yes | The display label for the step value. THis is also used for the aria-valuetext | |
| value | No type info | Yes | Value of the step. This value is a percentage of the slider where the tick is drawn. |
CSS variables
| .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 | undefined | |
| .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 | undefined | |
| .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 | undefined | |
| .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__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
