jQuery Range sliders are very useful UI elements when it comes to selecting min-max values. They provide many features like support for single or double handles, custom starting values, vertical/horizontal orientation and the ability to get /set values. Also work on touch devices and can be customized with CSS completely.
Below you will find 12 Best jQuery Range Slider Plugins which you can use for your ecommerce website, filtering the products based on a range of price and much more.
1. Ion Range Slider
Ion.Range Slider is a nice, comfortable and easily customizable range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS. It supports touch-devices which includes iPhone, iPad and etc.
Demo & Download
2. noUiSlider
noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!
Demo & Download
3. jQRangeSlider
jQRangeSlider is a jQuery and jQuery UI-powered slider plugin that has support for both numerical values and date/time. It works within a given range of values and can be set to use custom steps(like 10-by-10 or week-by-week). The plugin works well on touch devices (accept mouse wheels too), can be themed with CSS (there are 2 built-in themes) and provides callbacks for each change in values for interacting easily.
jQRangeSlider is open source published under dual license GPL and MIT. You can use it in both open source and commercial software.
Demo & Download
4. Pro Range Data Slider
It is a lightweight HTML5 based range data slider for mobile and desktop that creates data objects from user input and formats as JSON for modern web app’s. A substantial improvement over the data range sliders in jQueryUI and Twitter Bootstrap: This uses an astonishingly low 12kb payload and 3.5mb’s of browser ram. Ready for touchscreens and desktop, outputs JSON from user input values for data operation in applications as well.
Demo & Download
5. jQuery UI Slider Pips
jQuery UI Slider Pips is a jQuery plugin for making jQuery UI Sliders a little bit nicer. It’s adding little ‘pips’, ‘floats’ and labels to a slider.
It adds small “pips” and “labels” to the slider, extends the jQuery UI Slider widget, easily configurable, works for both horizontal and vertical sliders, and purely a visual plugin.
Demo & Download
See Also —
20 Free jQuery Image Sliders for 2017
25 Best jQuery Slideshow plugins
6. jQuery.nstSlider.js
jQuery.nstSlider.js is a fully customizable sliders with single/double handles, touch-enabled, IE 7+ compatibility, custom digit rounding, non linear step increments.
Demo & Download
7. Round Slider
Round Slider is a jQuery plugin that allows the user to select a value or range of values. Not only a round slider it supports the quarter, half and pie circle shapes also.
It has range slider support, touch support, keyboard support, supports all CSS animations, mouse scroll support, linear step increment, no need of images, and open source.
Demo & Download
8. Powerange
Powerange is a range slider control, inspired heavily by iOS 7 and the “Power Rangers” TV series. It is easily customizable, both by CSS and JavaScript. With it’s many features, including changing color and overall style, switching between horizontal and vertical style, custom min, max and start values, custom step interval, displaying decimal values, displaying icons instead of min/max numbers, it is a really powerful UI tool to use on your website.
Demo & Download
9. jQuery Slider Plugin
jQuery Slider is easy to use and multifunctional jQuery plugin that supports any webkit based touch mobile devices such as iPhone/iPod/iPad and Android.
Demo & Download
10. jQuery MB Value Slider
jquery.mb.valueSlider let you set a range between two numbers (positive or negative) and catch a value by dragging a cursor.
Demo & Download
11. Circular Slider
Circular slider is a jQuery plugin which helps to slide range of values and images. It supports half(top/bottom/up/down) and full circle shapes.
Demo & Download
12. Limitslider
A slider allowing multiple sliders and ranges with all sorts of optional limitations in position/size/distance. Also includes optional labels on the sliders and hover titles.
Demo & Download
