@danchitnis/simple-slider
TypeScript icon, indicating that this package has built-in type declarations

0.2.0 • Public • Published

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

Edit Simple Slider

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

Readme

Keywords

Package Sidebar

Install

npm i @danchitnis/simple-slider

Weekly Downloads

0

Version

0.2.0

License

MIT

Unpacked Size

49.9 kB

Total Files

11

Last publish

Collaborators

  • danchitnis