10 Best Range Slider Plugins In jQuery And Vanilla JavaScript

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.

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]


jQuery Plugin To Transform Radio Buttons Into A Sliders - Radios To Slider

Radios To Slider is a jQuery plugin to transform radio buttons into a nice styled value slider that allows you to pick a option with a simple sliding effect.

jQuery Plugin To Transform Radio Buttons Into A Sliders - Radios To Slider

[Demo] [Download]


Smooth Customizable Range Slider Plugin with jQuery - jRange

jRange is a simple jQuery plugin for creating a highly customizable range slider that features custom step, custom navigator (labels) and smooth sliding effects.

Smooth Customizable Range Slider Plugin with jQuery - jRange

[Demo] [Download]


Customizable & Accessible jQuery Range Slider Plugin - asRange

asRange is a jQuery plugin which converts an input field (or even a DIV element) into an accessible, fully customizable range slider control allowing users to input a range of values.

Customizable & Accessible jQuery Range Slider Plugin - asRange

[Demo] [Download]


Vanilla JavaScript Range Slider Plugins:

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]


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]


Elegant Animated Range Slider In Pure JavaScript – Ranger

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

Elegant Animated Range Slider In Pure JavaScript – Ranger

[Demo] [Download]


Pretty Range Input Replacement with JavaScript and CSS/CSS3

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

Pretty Range Input Replacement with JavaScript and CSS/CSS3

[Demo] [Download]


D3.js Range Slider In Pure JavaScript – d3RangeSlider

d3RangeSlider is a lightweight JavaScript range slider plugin which allows to pick a range of numeric values via drag and drop.

D3.js Range Slider In Pure JavaScript – d3RangeSlider

[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.