noUiSlider — a jQuery Range Slider [updated]

adminJavaScript, jQuery0 Comment
6 min. reading

Twitter Bootstrap is my main framework for creating websites and mobile PhoneGap application and it actually has anything I need, except a good slider.

Note, that I’m talking about a bar and a knob on it, which you can drag to set the value. I’m not talking about any kind of image slider, gallery or presentation. As most people know, Bootstrap has such thing, which is called Bootstrap Carousel.

I tired to use jQuery UI’s slider, as it is quite small (39,4 kB of minified JS and CSS code). This is not very much, when compared to whole jQuery UI library size. But it is way too much, when we thing that this 40 kB of code does nothing that building a simple slider (I’m not using jQuery UI at all). Plus: it works more than poorly on mobile devices with Android 2.x.x (a bit better on Android 4.1.x).

So, I was urgent need for an alternative. Thanks to Stack Overflow, I came across noUiSlider — jQuery Range Slider. And immediately felt in love with it.

Getting hands on

Let’s start with citing the author:

A lightweight, highly customisable slider without bloat. Supports Google Chrome, Firefox, Opera, Safari and Internet Explorer 7 to 10. It also supports touch on capable devices, such as iPhone, iPad and Windows 8 and Android devices.

What can we expect more? Not much, but noUiSlider has still much more to offer. It is completely customizable, with impressive set of options and easy to use styling selectors.

It is also very easy to use. That much of code is needed to get a horizontal slider:

$(".slider").noUiSlider
({
    range: [0, 100],
    start: 50,
    handles: 1,
    connect: "lower"
});

And that: $(".slider").val(); is all you need to read its value. This will return either a number or an array of two numbers, depending on how many handles (handles) you have there.

More nifty things

Actually, you don’t have to read value of a slider directly. One of its nifty things is a possibility to bind it to a field (or even two, if you have two handles) and let it update it / them automatically:

$(".slider").noUiSlider
({
    range: [0, 100],
    start: [50, 70],
    handles: 2,
    serialization:
    {
      to: [$("#exTO"), $("#exFR")]
    }
});

Value can be read then out of this field / these fields, and you don’t have to care, whether user has set value using slider or entered it manually to the field (fields).

And, if you don’t need values to be placed in field, but rather would like to see them directly in help, noUiSlider has also something for you:

$(".noUiSlider").noUiSlider
({
    range: [20, 100],
    start: [40, 80],
    step: 20,
    slide: function()
    {
        var values = $(this).val();

        $("span").text
        (
            values[0] +
            " - " +
            values[1]
        );
    }
});

Cool, huh? :] More nifty things are possible.

For example, with a code as easy as this:

$(".slider").noUiSlider
({
    range: [0, 1],
    start: 0,
    step: 1,
    handles: 1
});

You can turn your slider into two-state toggle — popular (especially in mobiles) alternative to checkbox.

Checkout homepage to see, how to turn noUiSlider into image gallery navigator, still with one line of code.

Final words

The best part is of course about “lightweight“. When gzipped, the minified noUiSlider plugin, including the default ‘fox’ theme, is just 2.74 kB. Without gzipping, it is only twice as much, that is — about 5 kB.

Last words are about styling. You’ll find all this info on homepage, but it is easy to be missed, so I repeat it here. noUiSlider comes with two, separate styles: noUiSlider.fox.css and noUiSlider.space.css.

First is default one, that you see at project’s page. Second is more future-like (at least in my opinion), but it also allows saving some space. You can check, how sliders would look like, when on project’s main page, in a floating toolbar, you switch Fox to Space.

An update

1 August 2013: I was really, really amazed, when looking at examples given on noUiSlider homepage. That’s why I wrote this article, before even trying to test noUiSlider locally. And I was punished, as it turned out, that it is actually not working at all.

This is very strange situation. Actually, I don’t recall any similar, that examples given on webpage works like a charm, and when moved to local side fails to work at all. But I thoroughly tested the issue and found, what I’ve found. So, if you’re interested in using this slider, simply test, if it really works and fit your projects.

You can consider ubilabs/mobile-range-slider as an alternative.

26 August 2013: noUiSlider has been updated to version 4.00 and all reported bugs seems to be fixed.

Leave a Reply