Vanilla framework documentation


You can apply the slider pattern on input type="range" elements.

Default slider

The p-slider pattern allows a user to select from a specified range of values, where the precise value is not considered important.

View example of the slider pattern

Slider with input

The p-slider__wrapper and p-slider__input classes should be used when you want to provide a numeric representation of the slider value, as well as allow the user to specify a value.

View example of the slider pattern