Best jQuery Range Slider Plugins & Tutorials with Demo

    wRunner : Range Slider Plugin in jQuery and JavaScript

    wRunner : Range Slider Plugin in jQuery and JavaScript

    wRunner is a plugin that adds a slider (slider) to select a value. The plugin has the ability to set themes, step, minimum and maximum values, etc. It has two types – single and range, as well as vertical and horizontal position. It has two implementations – on pure JS and on the basis of jQuery.

    jQuery Time Slider : Selection of Time and Date

    jQuery Time Slider : Selection of Time and Date

    jQuery Time Slider is a extension to jquery-base-slider with selection of time and date

    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