Best jQuery Range Slider Plugins & Tutorials with Demo

rsSliderLens : jQuery powerfull Input Range Control Slider

rsSliderLens : jQuery powerfull Input Range Control Slider

rsSliderLens is jQuery UI slider control that magnifies the current value.

Features:

  • Two types of slider:
    • Sliding type: The handle can move along the slide rail;
    • Fixed type: The handle remains in a fixed position, while the slide rail moves underneath;
  • When using the sliding type, two handles can be utilized to select ranges;
  • If desired, it can display magnified content inside the handle(s);
  • Supports both horizontal and vertical orientations;
  • Supports left to right and top to bottom directions. These directions can be reversed;
  • Either renders a rule or the markup’s original content;
  • Supports desktop and mobile events.

Multirange : Tiny Polyfill for HTML5 Multi-Handle Sliders

Multirange : Tiny Polyfill for HTML5 Multi-Handle Sliders

Multirange is a tiny polyfill for HTML5 multi-handle sliders.

Features:

  • Tiny.
  • No dependencies.
  • Uses feature detection, will not run if two-handle sliders are natively supported.
  • Keyboard accessible
  • Clicking on the track still works
  • Handles can be moved past each other
  • Customizable styling
  • JS properties polyfilled too (input.value,input.valueLowinput.valueHigh)

RangeTouch : Range Slider for Touch Devices

RangeTouch : Range Slider for Touch Devices

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

  • No setup required, just include the script
  • Less than 1KB minified and gzipped
  • No dependencies (written in “vanilla” JavaScript)

jQuery Range Picker

jQuery Range Picker

jQuery range picker let you set a range between two numbers (positive or negative) or even dates and catch a value by dragging a cursor.

Price Range Slider Using jQuery & PHP

Price Range Slider Using jQuery & PHP

Price Range slider is a slider having price on it means instead of entering the price user can also slide the meter to the appropriate price range and submit the price.Price Range Slider is very common in modern websites they are mainly used in eCommerce websites to give easy user experience.In this tutorial we will create a Price Range Slider Using jQuery,CSS and PHP.

rangeSlider : JavaScript polyfill for HTML5 Range Slider Element

rangeSlider : JavaScript polyfill for HTML5 Range Slider Element

Simple, small and fast vanilla JavaScript polyfill for the HTML5 `<input type=”range”>` slider element.

  • Touchscreen friendly
  • Recalculates onresize so suitable for use within responsive designs
  • Small and fast
  • Supports all major browsers
  • Buffer progressbar (for downloading progress etc.)

Bootstrap-Slider : jQuery Bootstrap Range Slider

Bootstrap-Slider : jQuery Bootstrap Range Slider

A complete rewrite of the original bootstrap-slider by Stefan Petre

Pro Range Data Slider : jQuery Plugin

Pro Range Data Slider : jQuery Plugin

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.

  • HTML5 ready. Use the new elements with confidence
  • A touch friendly data range slider
  • No code bloat
  • Formats input to JSON
  • Tallys amounts from each range slider to provide a total
  • Can be re-styled any way you like in CSS

Flat slider : Visual styler for jQuery UI slider

Flat slider : Visual styler for jQuery UI slider

Flat slider is an online tool that allows you to turn the jQuery UI slider into a beautiful flat slider. You can change the color and size of the slider line, handles and range. The tool generates the CSS as you make your changes, so that you can easily copy and paste it into your website stylesheets.

roundSlider : jQuery Circular Range Slider

roundSlider : jQuery Circular Range Slider

Round slider (also can call as Circular slider, Radial 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.