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


The p-slider component 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


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


For more information view the slider design spec, which includes the specification in markdown format and a PNG image.