Version: 5.x

vm-slider

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 https://github.com/sampotts/rangetouch).

Visual#

Vime slider component

Usage#

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

Properties#

PropertyDescriptionTypeDefault
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

Events#

EventDescriptionType
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#

NameDescription
--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.

Dependencies#

Used by#