Learning jQuery

noUiSlider is a little jQuery plugin that makes really cool (double) range sliders. 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. noUiSlider is developed to provide some basic slider functionality, without having to include the complete jQuery UI library. Whereas a custom build jQuery UI library, selecting only the slider, weights 42KB (not counting all images in the css), the noUiSlider is just 6,217 bytes, all css included. That's 84% less!

If you need features such as arrowkey-controlling, the UI library is your choice. If not, please consider this lightweight jQuery range slider plugin!

How to use it?

/* Create a slider */
$('#exampleSlider0').noUiSlider('init');

/* Retrieve values from slider */
var values = $('#exampleSlider0').noUiSlider('value');

/* Print the values on screen */
$("#examplePlace0").text( value.join(' ') );

noUiSlider 2.0 comes with a way better defined set of options, there is still a lot to choose. While all settings are optional, the slider might not be really useful if you use it without any.

Feel free to contact me for any help related to jQuery, I will gladly help you.