Best jQuery Range Slider Plugins & Tutorials with Demo

Rangeslider.js : jQuery polyfill for the HTML5 Range Slider Element

Rangeslider.js : jQuery polyfill for the HTML5 Range Slider Element

Simple, small and fast JavaScript/jQuery polyfill for the HTML5 <input type="range"> slider element.

Features:

  • Touchscreen friendly
  • Recalculates onresize so suitable for use within responsive designs
  • Small and fast

sGlide : jQuery plugin for feature-rich & mobile ready Slider

sGlide : jQuery plugin for feature-rich & mobile ready Slider

sGlide is a super flexible and light-weight jQuery plugin that generates a simple, feature-rich & mobile ready slider, which can be easily customized and styled using regular CSS.

jQueryUI Limitslider

jQueryUI Limitslider

jQuery slider extension forcing gaps and order for any number of handles.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.

Features:

  • Multiple sliders.
  • Multiple ranges.
  • Allows or blocks crossing of sliders.
  • Minimum distance between sliders.
  • Minimum/maximum position for all or individual sliders.
  • Label on the sliders.
  • Titles on sliders.
  • Use all of jQueryUI’s slider functionality.

Ion.RangeSlider : jQuery Range Slider Plugin

Ion.RangeSlider : jQuery Range Slider Plugin

Ion.RangeSlider — Nice, comfortable and easily customizable jQuery range slider with skins support. Also support events and public methods, has flexible settings, can be completely altered with CSS.

Features:

  • Slider supports negative and fractional values.
  • Ion.RangeSlider supports touch-devices (iPhone, iPad, etc.).
  • Crossbrowser: Google Chrome, Mozilla Firefox, Opera, Safari, IE(8.0+)

HostSlide Hosting Plan & Pricing Slider in jQuery

HostSlide Hosting Plan & Pricing Slider in jQuery

This HostSlide hosting plan & pricing slider is the best widget for your website. It’s lightweight and the layout can be changed easily in the CSS file. It’s powered by javascript and is supported in all major browsers. It enables you to use a simple and fast slide to view plan features and prices. It’s ready to be added to your website to give a brand new user experience. Unlimited plans/pricing/options can be added in seconds.

Features:

  • Compatible with all major browsers
  • Lightweight
  • Fully customizable
  • SEO friendly
  • Add unlimited prices and plans
  • Add unlimited options (e.g. price, bandwidth, CPU, RAM, Disk Space)

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

jQuery UI Bootstrap : Bootstrap-themed kickstart for jQuery UI widgets

A jQuery UI theme based on Twitter Bootstrap.This project was started to bring the beauty and ease-of-use of Twitter Bootstrap to jQuery UI widgets.In their original forms, jQuery UI and Bootstrap can’t coexist resulting in conflicts with both CSS classes and styles as well as JavaScript when you do try to use them. jQuery UI Bootstrap provides the JavaScript and CSS required to quickly start a project using both jQuery UI and Twitter Bootstrap.

Our solution offers a custom version of Bootstrap compatible with jQuery UI as well as a Bootstrap-themed jQuery UI theme you can use to prototype your projects.

jQuery Simple Unobtrusive Numerical Slider

jQuery Simple Unobtrusive Numerical Slider

SimpleSlider is a jQuery plugin for turning your text inputs into draggable numerical sliders.It has no external dependencies other than jQuery, and you don’t need to write a single line of JavaScript to get it to work.

slideControl : jQuery plugin for input slider

slideControl : jQuery plugin for input slider

slideControl jQuery Plugin.This plugin allows you to create nifty slider controls for text inputs.You can change the look of your slide controllers in there from background color to size to how the handle looks. Just take a look around and it should be pretty easy to make changes.

nobtrusive Slider Control/HTML5 Input Range Polyfill

nobtrusive Slider Control/HTML5 Input Range Polyfill

An Unobtrusive Accessible Slider script that can also be used as an HTML5 Input Range polyfill solution.

  • The script can be used as an HTML5 input range polyfill solution
  • Introduces a gradient filled “range bar” for quick visual feedback
  • iOS Touch screen friendly
  • Arrives with a new CSS3 skin that degrades gracefully in older browsers
  • A small network footprint – only two HTTP requests and a total size (minified and gzipped) of about 11k
  • Unobtrusive & namespace friendly
  • Conforms to the WAI-ARIA defined role of “slider”
  • Keyboard accessible
  • Mousewheel compatible
  • Responsive design friendly

jQRangeSlider : jquery UI range selection slider that supports dates

jQRangeSlider : jquery UI range selection slider that supports dates

jQRangeSlider is a jquery UI range selection slider that supports dates.

Features :

  • Select a range of values inside defined bounds.
  • Adjust your selection by moving an end.
  • Move your range as a whole.
  • Move selected range with scrolling arrows.
  • Select precisely your values.
  • Use your mouse wheel to scrool or extend/reduce the range (depends on an option).