noUiSlider Slider Range and Handles Reading & Setting Values Options Tapping, Dragging & Fixed Ranges Examples Events Scale/Pips Updating, Disabling & Styling Download
§

Disabling a slider

Disabling a slider is identical to disabling a checkbox or textarea; add the disabled attribute.

A disabled slider can't be changed by user interaction (sliding, clicking or touching), but you can still change its value using the .set() method.

CSS can be used to show the disabled state. The default stylesheet also sets a not-allowed cursor.

The slider below is disabled when the checkbox is checked, and re-enabled when it is unchecked.

Individual handles can be disabled by adding a disabled attribute to a .noUi-origin element.


// To disable
slider.setAttribute('disabled', true);

// To re-enable
slider.removeAttribute('disabled');

// To disable one handle
var origins = slider.getElementsByClassName('noUi-origin');
origins[0].setAttribute('disabled', true);
Toggling the disabled attribute
var slider1 = document.getElementById('disable1'),
    slider2 = document.getElementById('disable2'),
    checkbox1 = document.getElementById('checkbox1'),
    checkbox2 = document.getElementById('checkbox2'),
    checkbox3 = document.getElementById('checkbox3'),
    origins = slider2.getElementsByClassName('noUi-origin');

function toggle(element) {

    // If the checkbox is checked, disabled the slider.
    // Otherwise, re-enable it.
    if (this.checked) {
        element.setAttribute('disabled', true);
    } else {
        element.removeAttribute('disabled');
    }
}

noUiSlider.create(slider1, {
    start: 80,
    connect: [true, false],
    range: {
        min: 0,
        max: 100
    }
});

noUiSlider.create(slider2, {
    start: [20, 80],
    range: {
        min: 0,
        max: 100
    }
});

checkbox1.addEventListener('click', function () {
    toggle.call(this, slider1);
});

checkbox2.addEventListener('click', function () {
    toggle.call(this, origins[0]);
});

checkbox3.addEventListener('click', function () {
    toggle.call(this, origins[1]);
});
§

Updating and reading slider options

noUiSlider has an update method that can change the 'margin', 'limit', 'step', 'range', 'pips', 'animate' and 'snap' options.

All other options require changes to the slider's HTML or event bindings.

To update any other option, destroy the slider using slider.noUiSlider.destroy() and create a new one. Events are unbound when destroying a slider.

The update method can be called as:

slider.noUiSlider.updateOptions(
	newOptions, // Object
	true // Boolean 'fireSetEvent'
);

Options that can not be updated will be ignored without errors.

The 'update' event fires after updating the slider.

By default, the sliders values remain unchanged. To update the slider values, newOptions may also contain a start property that matches the signature of the .set() method.

The 'set' event fires when the slider values are restored. If this is unwanted, you can pass false as the second parameter, fireSetEvent.

Options can be read from the slider using the slider.noUiSlider.options property. This property contains a reference to the options object passed when creating the slider. This object is modified when calling updateOptions.

Note that if you initiate multiple sliders using the same options object and update a subset of them later, this will move the options property out of sync with the actual slider options.

HTML for this example
<div id="update"></div>
<span id="value"></span>

<button class="update-button" id="update-1">
	Set range [20, 50]
</button>

<button class="update-button" id="update-2">
	Set range [10, 40]
</button>
Setting up the slider
var updateSlider = document.getElementById('slider-update');
var updateSliderValue = document.getElementById('slider-update-value');

noUiSlider.create(updateSlider, {
    range: {
        'min': 0,
        'max': 40
    },
    start: 20,
    margin: 2,
    step: 2
});

updateSlider.noUiSlider.on('update', function (values, handle) {
    updateSliderValue.innerHTML = values[handle];
});
Updating the slider with new options on button click
var button1 = document.getElementById('update-1');
var button2 = document.getElementById('update-2');

function updateSliderRange(min, max) {
    updateSlider.noUiSlider.updateOptions({
        range: {
            'min': min,
            'max': max
        }
    });
}

button1.addEventListener('click', function () {
    updateSliderRange(20, 50);
});

button2.addEventListener('click', function () {
    updateSliderRange(10, 40);
});
§

Styling

Styling noUiSlider is easy. The default stylesheet contains helpful comments to get a head start.

It is recommended to use the default stylesheet, overriding where necessary, as a starting point when re-styling noUiSlider.

If your styling system doesn't match the convention in noUiSlider, you can use the cssPrefix and cssClasses options to reconfigure the markup.

noUiSlider listens to events on the .noUi-base element. To add padding on the .noUi-target element and contain handles within the slider width, .noUi-base needs to be extended. This can be done using CSS :before and :after pseudo-elements. An example is included to the right.

CSS classes overview
Selector Effect
.noUi-target This class is added to the element you call .noUiSlider() on. Has border, background and other styling properties to establish the slider design and background.
.noUi-base The slider bar. Serves as the calculating point for the slider handles, and has no visible styling.
.noUi-origin The elements connected to the base, defining the handle locations.
.noUi-handle The actual, visible handles. Style these any way you like!
.noUi-connect Styling class for setting properties related to the slider connect segment.
.noUi-state-tap This class is added when the slider bar is tapped or clicked. A slider with this call will reject any user input. noUiSlider will remove this class after 300ms, leaving that timespan to perform visual animations.
[disabled] Apply this to your slider to disable it, and make sure the slider visuals reflect the disabled state.
Add padding to slider base
.noUi-target {
    padding: 0 17px;
}
.noUi-base:before,
.noUi-base:after {
    width: 17px;
    content: "";
    position: absolute;
    top: 0;
    height: 100%;
    display: block;
}
.noUi-base:before {
    left: -17px;
}
.noUi-base:after {
    left: 100%;
}
Overriding classes
noUiSlider.create(slider, {
    start: 80,
    range: {
        min: 0,
        max: 100
    },
    cssPrefix: 'noUi-', // defaults to 'noUi-',
    cssClasses: {
        // Full list of classnames to override.
        // Does NOT extend the default classes.
        // Have a look at the source for the full, current list:
        // https://github.com/leongersen/noUiSlider/blob/master/src/js/options.js#L398
    }
});