simple-slider

A simple range slider based on vanilla HTML, CSS and JS with no dependencies. Features include:

Cross-browser compatibility using vanilla Javascript and CSS
Simple constructor and developer friendly
Single file library with no dependency, written in Typescript and compatible with ES6
Can be bundled with modern tools such as RollupJS
Touch enabled for touchscreen devices
Responsive to real-time layout change

Example

Initialization

const slider = new SimpleSlider("slider", 0, 100, 0);

handle the update event

slider.addEventListener("update", e => {
  pValue.innerHTML = slider.value.toString() + "%";
});

Redraw the slider upon window resize

window.addEventListener("resize", () => {
  slider.resize();
});

Add the following polyfill before your script to have support for Webkit. This also includes Chrome on iPhone since it is based on Webkit.

<script src="https://unpkg.com/@ungap/event-target"></script>

This package will automatically detect if Event-Target is present in the browser.

inspired by noUiSlider