Lightweight and Customisable Range Slider Plugin - noUiSlider

Lightweight and Customisable Range Slider Plugin -  noUiSlider
File Size: 148 KB
Views Total:
Last Update:
Publish Date:
Official Website: Go to website
License: MIT
   

noUiSlider is a Lightweight and Customisable plugin for creating really cool Range Slider without having to include the complete jQuery UI library. Every slider can have two handles to select a range, a fixed minimum or maximum can be set to select a limit, or two handles can be used, to simply pick some points.

Every event in the noUiSlider has an optional callback, so you can completely control any slider interaction. There is also some cool math in the read-out functions, so you can dynamically calculate any selected value. 

It supports touch on capable devices, such as iPhone, iPad and Android phones and tablets. 

You Might Also Be Interested In:

Basic Usage (Create a range slider):

1. Include the latest jQuery library and noUiSlider.js in your head section

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="jquery.nouislider.min.js"></script>

2. Include necessary CSS file on your page

<link href="nouislider.fox.css" rel="stylesheet" type="text/css">
<link href="nouislider.space.css" rel="stylesheet" type="text/css">

3. Markup

<div class="noUiSlider"></div>
<span id="s1" class="example">40.00 - 80.00</span>

4. Call the plugin

<script>
$(".noUiSlider").noUiSlider({
    range: [20, 100]
   ,start: [40, 80]
   ,step: 20
   ,slide: function(){
      var values = $(this).val();
      $("span").text(
         values[0] +
         " - " +
         values[1]
      );
   }
});
</script>

4. Available options.

// sets the number of handles and their start positions
start: [20, 80],

// max & min range
range: {
  'min': [ 0 ],
  'max': [ 100 ]
},

// used to control the bar between the handles, or the edges of the slider
// lower or upper
connect: "lower",

// the minimum distance between the handles
margin: 30,

// limites the maximum distance between two handles
limit: 40,

// make the handles jump between intervals
step: 10,

// vertical or horizontal
orientation: "vertical",

// rtl or ltr
direction: "rtl",

// enables animation
animate: true,

Change Logs:

v9.2.0 (2017-01-11)

  • Added: Version number to exceptions;
  • Added: noUiSlider.version holds current version number;
  • Added: Throw exception on invalid pips configuration
  • Added: Merged pull request that uses less preprocessor to generate CSS;

v9.1.0 (2016-12-11)

  • Fixed: Slider not properly handling multitouch
  • Fixed: Removed a querySelector for the currently active handle
  • Fixed: Removed iOS/webkit flashes on tap
  • Fixed: Incorrect error when using margin/limit with a step smaller than 0
  • Fixed: Drag option using incorrect cursor arrows
  • Added: New padding option
  • Added: Re-introduced .noUi-handle-lower and .noUi-handle-upper classes removed in 9.0.0;
  • Added: Compatibility for legacy connect options removed in 9.0.0

v9.0.0 (2016-09-30)

  • Added: Support for more than 2 handles;
  • Added: format option can be updated;
  • Added: reset method the return slider to start values;
  • Change: connect option is now implemented as a separate node;
  • Change: all event arguments, including the handle number, are now in slider order;
  • Change: updateOptions now modifies the original options object. The reference in slider.noUiSlider.options remains up to date;
  • Change: more events fire when using various behaviour options;
  • Change: on rtl sliders, handles are now visually positioned from the sliders right/bottom edge;
  • Change: events for rtl sliders now fire in the same order has for ltr sliders (with incremental handleNumbers);
  • Change: internal Spectrum component is no longer direction aware;
  • Change: limit and margin must be divisible by step (if set);
  • Removed: .noUi-stacking class. Handles now stack themselves;
  • Removed: .noUi-handle-lower and .noUi-handle-upper classes;
  • Removed: .noUi-background. This is now default;
  • Removed: connect: 'lower' and connect: 'upper'. These settings are replaced by connect: [true, false];
  • Fixed: default tooltip color;
  • Fixed: margin and limit calculated improperly after calling updateOptions with a new range option;
  • Fixed: range option was required in update, even when not updating it;
  • Fixed: Cursor styling is now consistent for disable handles and sliders;
  • Fixed: Sliders now ignore touches when the screen is touched multiple times;

v8.5.1 (2016-04-25)

  • Fix: class mixup in 8.5.0 merge
  • Change: position pips markers relatively
  • Added: ability to completely override the classes used by the slider
  • Fix: removed invalid stopPropagation loop
  • Fix: source properly lints

v8.4.0 (2016-04-17)

  • Fix: don't assume window exists.
  • Fix: :focus style applied to wrong element. 
  • Fix: step option is lost on updating. 
  • Fix: exposed options should be the original options, not the parsed set.
  • Added: handle animation time configurable.
  • Added: slider values can be updated without firing set.
  • Change: internal value calculations no longer limited to 7 decimals. 

v8.3.0 (2016-02-15)

  • Expose several internal features, including options and pips.
  • Add a fifth argument to all events, containing the handle offsets.
  • Fixed margin: 0 throwing an error.
  • Fixed set firing when calling slider.noUiSlider.set with a null value.
  • Fix and clarify some examples

v8.2.0 (2015-11-29)

  • Added 'start', 'end' and 'hover' events
  • Added better tooltip formatting options
  • Bugfixes, including an issues where a mouseup would be missed

v8.0.2 (2015-07-06)

  • Fixed 'unresolved varaible' error.

v8.0.1 (2015-06-30)

  • Fixed an issue with IE11 on touch devices.
  • Removed jQuery dependency! 

v7.0.10 (2014-12-28)

  • Fixed an issue where calling .val(undefined) wouldn't match specification;
  • Values in range are now properly sorted before being used (and can thus be passed in any order);
  • Fixed an error in .noUiSlider('step') where JS floating point precision would mess up a comparison;
  • Fixed the slider styles failing when CSS direction: rtl is set;
  • Fixed throwing an error when running .noUiSlider on an empty selection;
  • Fixed the filter function for the pips plugin not always being called;

v7.0.9 (2014-10-09)

  • Fixed an issue when using the pips plugin with sliders not starting at 0.

v7.0.8 (2014-09-24)

  • Fixed: noUiSlider breaks WordPress menu builder

v7.0.6 (2014-09-12)

  • Added bower support.

v7.0.2 (2014-09-07)

  • Major update.

v7.0.1 (2014-08-23)

  • Major update.

v6.2.0 (2014-05-11)

  • Removed the previously added .classVal and replaced it with a lightweight solution.
  • Fixed a bug in non-linear stepping for RTL sliders.
  • Added checks for min and max in range. 
  • Added the minified version in the source, so it can be managed with Bower. 

v6.1.0 (2014-04-24)

  • Split out value methods into $.classVal. This is included in the release download.
  • $.noUiSlider.Link is now an alias to $.Link. The Link functionality has been moved into a new file. (also in the download).
  • Several bug fixes.
  • Added to and from to number formatting

v6.0.0 (2014-03-17)

  • Added optional non-linear ranges, including stepping.
  • Added new behaviour settings.
  • Added object-oriented serialization.
  • Change events to use jQuery's/Zepto's .on and .off.
  • Removed block event.

v5.0.0 (2013-12-05)

  • Minor rounding fixes
  • Fixed closure

v4.3.0 (2013-11-16)

  • Fixed Zepto problems with jQuery `.is()`
  • Connect for RTL, string fix in IE8, removed test.

v4.2.2 (2013-10-19)

  • Changed implementation of pointerEvents to be compatible with IE11.

v4.2.0 (2013-10-12)

  • added jsLint directive

v4.0.0 (2013-09-23)

  • 4.0 rewrite
  • Fixed setting val by integer

v3.2.1 (2013-03-27)

  • Fixed an issue when initializing a slider with two handles, both on 100%.

v3.2.0 (2013-03-22)

  • Fixed some touch-event related issue

v3.1.1 (2013-03-03)

  • Fixed disabled serialization

v3.0.6 (2013-03-02)

  • Fixed a minor issue in option handling
  • Improved plugin manifest
  • Improved plugin compression

v3.0.0 (2013-03-01)

  • Added responsive design support
  • Added Windows Pointer Events support
  • Fixed issues
  • Reduced file size

 


This awesome jQuery plugin is developed by leongersen. For more Advanced Usages, please check the demo page or visit the official website.