vertical-range-slider

Zero-dependency recreation of the iOS vertical range slider. Uses a range input as an accessibility base. Supports scroll events and pointer events. (It also bounces a little when you touch it.)

Usage no npm install needed!

<script type="module">
  import verticalRangeSlider from 'https://cdn.skypack.dev/vertical-range-slider';
</script>

README

Range Slider

An accessible and flexible range slider web component.

Attributes

min

max

step

value

shadow-value

position-indicator

CSS Variable configurations

  • --rangeInputColor: Change the background colour of the input (default: rgba(0, 0, 0, 0.8))
  • --rangeInputTrackColor: Change the range track colour (default: #fff)
  • --rangeInputWidth: Change the input width (default 3.75rem, usually 60px)
  • --rangeInputHeight: Change the input height (default: 2.66 * width.)
  • --rangeInputIconSize: Change the icon size (default: width / 3 )