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