@19h47/slider 中文文档教程

Question

@19h47/slider

Usage

import Slider from @19h47/slider

const $slider = document.querySelector('[role=slider]');
const slider = new Slider($slider);

slider.init();

Keyboard Support

Key	Function
Right Arrow	Increases slider value one step.
Up Arrow	Increases slider value one step.
Left Arrow	Decreases slider value one step.
Down Arrow	Decreases slider value one step.
Page Up	Increases slider value multiple steps. In this slider, jumps ten steps.
Page Down	Decreases slider value multiple steps. In this slider, jumps ten steps.
Home	Sets slider to its minimum value.
End	Sets slider to its maximum value.

Event

Event	Arguments	Description
Slider.change	event	Object containing now value.

import Slider from @19h47/slider

const $slider = document.querySelector('[role=slider]');
const slider = new Slider($slider);

slider.init();

slider.on('Slider.change', ({ now ) => {
    console.log(now);
});

Acknowledgments

• Multithumb slider