Slider

A slider is an interactive element that allows users to quickly set and adjust a numeric value from a defined range of values.

Examples

Attribute	Applied to	Outcome
`role="slider"`	`.pf-v6-c-slider__thumb`	Identifies the element as a slider. Required
`tabindex="0"`	`.pf-v6-c-slider__thumb`	Includes the slider thumb in the page tab sequence. Note: only for use with non-disabled slider. Required
`aria-disabled="true"`	`.pf-v6-c-slider.pf-m-disabled .pf-v6-c-slider__thumb`	Indicates that the slider thumb is disabled. Required
`aria-valuemin="[value]"`	`.pf-v6-c-slider__thumb`	Specifies the minimum value of the slider. Required
`aria-valuemax="[value]"`	`.pf-v6-c-slider__thumb`	Specifies the maximum value of the slider. Required
`aria-valuenow="[value]"`	`.pf-v6-c-slider__thumb`	Specifies the current value of the slider. Required

Class	Applied to	Outcome
`.pf-v6-c-slider`	`<div>`	Initiates the slider component. Required
`.pf-v6-c-slider__main`	`<div>`	Initiates the slider main element. Required
`.pf-v6-c-slider__rail`	`<div>`	Initiates the slider rail. Required
`.pf-v6-c-slider__rail-track`	`<div>`	Initiates the slider rail track. Required
`.pf-v6-c-slider__steps`	`<div>`	Initiates the slider steps.
`.pf-v6-c-slider__step`	`<div>`	Initiates a slider step.
`.pf-v6-c-slider__step-tick`	`<div>`	Initiates a slider step tick.
`.pf-v6-c-slider__step-label`	`<div>`	Initiates a slider step label.
`.pf-v6-c-slider__thumb`	`<div>`	Initiates the slider thumb. Required
`.pf-v6-c-slider__value`	`<div>`	Initiates the slider value.
`.pf-v6-c-slider__actions`	`<div>`	Initiates the slider actions.
`.pf-m-disabled`	`.pf-v6-c-slider`	Modifies the slider for the disabled state.
`.pf-m-floating`	`.pf-v6-c-slider__thumb`	Modifies the slider value to float above the thumb.
`--pf-v6-c-slider--value`	`.pf-v6-c-slider`	Applies appropriate slider styles based on the current value. Required