Jump to main content


The p-slider__wrapper and p-slider__input classes should be used with <input type="range"> elements when you want to provide a numeric representation of the slider value, as well as allow the user to specify a value.

Updated In version 2.6.0 Vanilla framework added slider styling as default for all range inputs, so adding p-slider class just to style <input type="range"> is not necessary any more.


To import just this component into your project, copy the snippet below and include it in your main Sass file.

// import Vanilla and include base mixins
// this only needs to happen once in a given project
@import 'vanilla-framework/scss/vanilla';
@include vf-base;

@include vf-p-slider;

For more information see Customising Vanilla in your projects, which includes overrides and importing instructions.


You can use slider in React by installing our react-component library and importing Slider component.

See the documentation for our React Slider component