Examples
Types
SliderOnChangeEvent
The slider's onChange
prop accepts an event
parameter of the following types:
React.MouseEvent
React.KeyboardEvent
React.FormEvent<HTMLInputElement>
React.TouchEvent
React.FocusEvent<HTMLInputElement>
The SliderOnChangeEvent
type is a union of the above event types, and can be imported and used in your code like in the following code snippet:
import { Slider, SliderOnChangeEvent } from '@patternfly/react-core';
<Slider onChange={(event: SliderOnChangeEvent) => {}} />
Props
Slider
Name | Type | Default | Description |
---|---|---|---|
areCustomStepsContinuous | boolean | false | Flag indicating if the slider 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's accessible description. | |
aria-labelledby | string | One or more id's to use for the slider thumb's accessible label. | |
className | string | Additional classes added to the slider. | |
customSteps | SliderStepObject[] | Array of custom slider step objects (value and label of each step) for the slider. | |
endActions | React.ReactNode | Actions placed at the end of the slider. | |
hasTooltipOverThumb | boolean | false | |
inputAriaLabel | string | 'Slider value input' | Accessible label for the input field. |
inputLabel | string | number | Text label that is place after the input field. | |
inputPosition | 'aboveThumb' | 'right' | 'end' | 'end' | Position of the input. Note "right" is deprecated. Use "end" instead |
inputValue | number | 0 | Value displayed in the input field. |
isDisabled | boolean | false | Adds disabled styling, and disables the slider and the input component if present. |
isInputVisible | boolean | false | Flag to show value input field. |
Deprecated: leftActions | React.ReactNode | Use startActions instead. Actions placed at the start of the slider. | |
max | number | 100 | The maximum permitted value. |
min | number | 0 | The minimum permitted value. |
onChange | ( event: SliderOnChangeEvent, value: number, inputValue?: number, setLocalInputValue?: React.Dispatch<React.SetStateAction<number>> ) => void | Value change callback. This is called when the slider value changes. | |
Deprecated: rightActions | React.ReactNode | Use endActions instead. 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. |
startActions | React.ReactNode | Actions placed at the start of the slider. | |
step | number | 1 | The step interval. |
thumbAriaLabel | string | 'Value' | |
value | number | 0 | Current value of the slider. |
SliderStepObject
Name | Type | Default | Description |
---|---|---|---|
labelrequired | string | The display label for the step value. This is also used for the aria-valuetext attribute. | |
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
Expand or collapse column | Selector | Variable | Value |
---|
View source on GitHub