7 Best Range Slider Replacement Libraries

This is a unique and up-to-date list of 10 best JavaScript libraries (plugins) to replace, beautify, and enhance the default browser range slider (Input Range Object) with ease. Have fun.

7. d3RangeSlider


Demo Download

d3RangeSlider is a lightweight JavaScript range slider plugin which allows to pick a range of numeric values via drag and drop. Depending on the latest D3.js library.

6. Rangebar.js


Demo Download

Rangebar.js is a vanilla JavaScript library (ES5/6 compatible) for rendering slim, nice, horizontal or vertical range sliders on your web applications. Supports both single and multiple sliders.

5. Pretty Range Input Replacement with JavaScript and CSS/CSS3

Pretty Range Input Replacement

Demo Download

A Javascript & CSS/CSS3 based range replacement created by thebabydino to create a pretty range slider with gradient bar, glowing effect and metal handler.

4. Ranger


Demo Download

Ranger is a lightweight, ES6 compatible JavaScript library used for creating an elegant, animated range slider with custom labels and scales.

3. rangeSlider

Responsive & Touch-enabled Range Slider In Vanilla JavaScript - rangeSlider

Demo Download

rangeSlider is a pure Vanilla JavaScript library that convert regular Html5 range inputs into responsive, mobile-friendly range slider UI controls.

2. multirange


Demo Download

multirange is a tiny JavaScript polyfill for HTML5 ‘multiple’ range input, with support for Keyboard accessible and customizable slider / handle styles.

1. Simple Flat Html5 and CSS3 Range Slider

Simple Flat Html5 and CSS3 Range Slider

Demo Download

Converts Html5 input type=range into a nice flat styled range slider built on top of pure CSS/CSS3.