Skip to main content
Version: 5.x


A custom styled and ARIA friendly input[type="range"] component for inputting numeric values. In addition, there are optimizations made for improved touch support (more information can be found at


<vm-slider step="5" max="100" value="50" label="Volume" />
const slider = document.querySelector('vm-slider');
slider.addEventListener('vmValueChange', event => {
const newValue = event.detail;


labelA human-readable label for the purpose of the slider.string ∣ undefinedundefined
maxThe greatest permitted value.number10
minThe lowest value in the range of permitted values.number0
stepA number that specifies the granularity that the value must adhere to.number1
valueThe current value.number5
valueTextHuman-readable text alternative for the current value. Defaults to value:max percentage.string ∣ undefinedundefined


vmBlurEmitted when the slider loses focus.CustomEvent<void>
vmFocusEmitted when the slider receives focus.CustomEvent<void>
vmValueChangeEmitted when the value of the underlying input field changes.CustomEvent<number>

CSS Custom Properties#

--vm-slider-thumb-bgThe background color of the slider thumb.
--vm-slider-thumb-heightThe height of the slider thumb.
--vm-slider-thumb-shadowThe shadow cast around the slider thumb.
--vm-slider-thumb-widthThe width of the slider thumb.
--vm-slider-track-colorThe color of the track.
--vm-slider-track-focused-heightThe height of the track when it is focused.
--vm-slider-track-heightThe height of the track.
--vm-slider-value-colorThe color of the part of the track filled upto the current value.


Used by#