10 Best Range Slider Plugins In JavaScript (2020 Update)

by jQueryScript,

What Is Range Slider?

Range slider is a two-handle slider control that allows the user to select one or a range of values (e.g. prices, dates, times, etc) by dragging handles.

How To Create Custom Range Slider Using CSS?

The fastest way to create custom range slider is to use the CSS pseudo-element as follows:

.slider::-webkit-slider-thumb {
  -webkit-appearance: none; /* Override default look */
  appearance: none;
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

.slider::-moz-range-thumb {
  width: 25px; /* Set a specific slider handle width */
  height: 25px; /* Slider handle height */
  background: #4CAF50; /* Green background */
  cursor: pointer; /* Cursor on hover */
}

The Best Range Slider Plugins

Sometimes you might need an advanced and highly customizable range slider to replace the native HTML range input.

This is why I listed here the 10 best and top downloaded JavaScript and/or jQuery based range slider plugin to meet your design needs. I hope you like it.

Originally Published Oct 09 2019, updated Jan 30 2020

Table of contents:

jQuery Range Slider Plugins:

Accessible Touch-friendly Range Slider Plugin - noUiSlider

noUiSlider is a Lightweight and Customisable plugin for creating really cool, touch-friendly Range Sliders without having to include the complete jQuery UI library.

Accessible Touch-friendly Range Slider Plugin -  noUiSlider

[Demo] [Download]


Flexible and Touch-Friendly jQuery Range Slider Plugin - Ion.RangeSlider

Ion Range Slider is a jQuery plugin that turns the standard html input elements into flexible, skinnable, customizable and mobile friendly range sliders. Ion.RangeSlider also supports events and methods, and can be fully customized through CSS and javascript.

Flexible and Touch-Friendly jQuery Range Slider Plugin - Ion.RangeSlider

[Demo] [Download]


Touch-enabled Custom Range Slider In jQuery - rangeSlider.js

A small and fast jQuery plugin to create a customizable, responsive, touch-enabled range slider control from the native HTML5 range input.

Touch-enabled Custom Range Slider In jQuery - rangeSlider.js

[Demo] [Download]


Powerful Range Slider Plugin - jQRangeSlider

jQRangeSlider is a powerful range slider plugin built with jquery for selecting value ranges, supporting dates and more.

Powerful Range Slider Plugin - jQRangeSlider

[Demo] [Download]


Highly Customizable Range Slider Plugin For Bootstrap - Bootstrap Slider

Bootstrap Slider is a jQuery plugin that uses native Bootstrap styling to generate highly configurable, accessible, touch-friendly single value sliders or range sliders from normal range inputs.

Highly Customizable Range Slider Plugin For Bootstrap - Bootstrap Slider

[Demo] [Download]


Vanilla JavaScript Range Slider Plugins:

rangetouch

A super tiny library to make <input type='range'> sliders work better on touch devices.

rangetouch

[Demo] [Download]


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

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

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

[Demo] [Download]


Mobile-friendly Custom Range Slider In JavaScript – range-slider

A responsive, touch-enabled, progressively enhanced range slider plugin that gracefully degrades to a standard HTML5 range input if JavaScript is disabled.

Mobile-friendly Custom Range Slider In JavaScript – range-slider

[Demo] [Download]


Clean Mobile-friendly Range Slider In JavaScript - rangeslider-js

A tiny JavaScript plugin that converts the normal range input into a pretty clean, fully responsive, and touch-friendly range slider.

Clean Mobile-friendly Range Slider In JavaScript - rangeslider-js

[Demo] [Download]


Animated Customizable Range Slider In Pure JavaScript – rSlider.js

rSlider.js is a dependency-free JavaScript library for dynamically rendering pretty nice range sliders with custom scales, labels, and tooltips.

Animated Customizable Range Slider In Pure JavaScript – rSlider.js

[Demo] [Download]


Conclusion:

Want more jQuery plugins or JavaScript libraries to create awesome Range Slider on the web & mobile? Check out the jQuery Range Slider and JavaScript Range Slider sections.