Skip to main content
Version: 4.x

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