vime-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

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

Properties

PropertyAttributeDescriptionTypeDefault
labellabelA human-readable label for the purpose of the slider.string โˆฃ undefinedundefined
maxmaxThe greatest permitted value.number10
minminThe lowest value in the range of permitted values.number0
stepstepA number that specifies the granularity that the value must adhere to.number1
valuevalueThe current value.number5
valueTextvalue-textHuman-readable text alternative for the current value. Defaults to value:max percentage.string โˆฃ undefinedundefined

Events

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

Graph

graph TD;
vime-scrubber-control --> vime-slider
vime-volume-control --> vime-slider
style vime-slider fill:#f9f,stroke:#333,stroke-width:4px

Built with StencilJS