vanilla Jsu Range

Create a range with two thumbs.

Install

First, load assets/js/range.js and assets/css/range.css in your webpage.

Then, when DOM is ready, start the plugin :

document.querySelectorAll(".range").forEach(function($item) {
    new vanillaJsuRange($item);
});

Roadmap

• Add touch compatibility.
• Avoid thumb collisions.
• Display track between thumbs.
• Minified version.
• Initial values.
• Refresh from input values.
• How to install.
• Fix when manually changing an input to its minimal or maximal values.