Patternfly Logo

Slider

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

Discrete

Continuous

Value input


%

%

Thumb value input

%

Actions



%


%

Documentation

Accessibility

AttributeApplied toOutcome
role="slider".pf-c-slider__thumbIdentifies the element as a slider. Required
tabindex="0".pf-c-slider__thumbIncludes the slider thumb in the page tab sequence. Required
aria-valuemin="[value]".pf-c-slider__thumbSpecifies the minimum value of the slider. Required
aria-valuemax="[value]".pf-c-slider__thumbSpecifies the maximum value of the slider. Required
aria-valuenow="[value]".pf-c-slider__thumbSpecifies the current value of the slider. Required

Usage

ClassApplied toOutcome
.pf-c-slider<div>Initiates the slider component. Required
.pf-c-slider__main<div>Initiates the slider main element. Required
.pf-c-slider__rail<div>Initiates the slider rail. Required
.pf-c-slider__rail-track<div>Initiates the slider rail track. Required
.pf-c-slider__steps<div>Initiates the slider steps.
.pf-c-slider__step<div>Initiates a slider step.
.pf-c-slider__step-tick<div>Initiates a slider step tick.
.pf-c-slider__step-label<div>Initiates a slider step label.
.pf-c-slider__thumb<div>Initiates the slider thumb. Required
.pf-c-slider__value<div>Initiates the slider value.
.pf-c-slider__actions<div>Initiates the slider actions.
.pf-m-floating.pf-c-slider__thumbModifies the slider value to float above the thumb.
--pf-c-slider--value.pf-c-sliderApplies appropriate slider styles based on the current value. Required

CSS variables


View source on Github