10 Best Range Slider Plugins In JavaScript (2021 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 Feb 16 2021

Table of contents:

jQuery Range Slider Plugins:

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]


Convenient Price Range Slider With jQuery UI

A simple jQuery and jQuery UI based price range slider for eCommerce websites that enable the customers to filter product list by a price range specified in the min/max value fields or by dragging the slider handlers.

Convenient Price Range Slider With jQuery UI

[Demo] [Download]


Range Slider With Custom Handles Labels Scales - rangeSlider.js

Yet another custom range slider control plugin that allows the user to pick a single value or a range of values (2 handles) within a predefined range.

Range Slider With Custom Handles Labels Scales - rangeSlider.js

[Demo] [Download]


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]


jQuery Circular Range Slider Plugin - roundSlider

roundSlider is a jQuery plugin for converting a DIV element into a circular range slider which helps you slide range of values with mouse drag.

jQuery Circular Range Slider Plugin - roundSlider

[Demo] [Download]


Vanilla JavaScript Range Slider Plugins:

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.

rSlider.js

Demo Download


HTML5 Multi-handle Range Slider Polyfill Solution – multirange

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

HTML5 Multi-handle Range Slider Polyfill Solution – multirange

Demo Download


rangeSlider

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

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

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


Creative Circular Range Slider With JavaScript And SVG

A Javascript library that enables developers to draw circular range slider controls with legend data using plain JavaScript and SVG element.

Creative Circular Range Slider With JavaScript And SVG

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.

See also: