@19h47/slider

Getting started

Import the controller and initialize it with a rail element that contains 2 thumbs.

import Slider from '@19h47/slider'

const rail = document.querySelector('.rail')
const slider = new Slider(rail, { orientation: 'horizontal', width: 24, height: 24 })

slider.init()

Markup

The rail must contain exactly 2 elements with role="slider". Order matters: first = max, second = min.

<div class="rail">
  <button role="slider" class="max" aria-label="Maximum" aria-valuemin="0" aria-valuemax="35" aria-valuenow="35" aria-orientation="horizontal"></button>
  <button role="slider" class="min" aria-label="Minimum" aria-valuemin="0" aria-valuemax="35" aria-valuenow="0" aria-orientation="horizontal"></button>
</div>

Options

Events

The rail dispatches a Slider.change event with { min, max, active }.

rail.addEventListener('Slider.change', (event) => {
  const { min, max, active } = event.detail
  console.log({ min, max, active })
})