@danchitnis/simple-slider

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();
});

JSfiddle Example

CodePen Example

Webkit (i.e. Safari & iPhone)

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.

API documentation

See here 🧾

Contributions

inspired by noUiSlider