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

Disabling a slider

A slider can be disabled by calling the disable method in the API.

A disabled slider can't be changed by user interaction (sliding, clicking or touching), but its value can still be changed 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 calling the disable with a zero-index handle number. Disabling an individual handle will also prevent it from having focus.

The slider or handles can re re-enabled using the enable method.


// To disable
slider.noUiSlider.disable();

// To re-enable
slider.noUiSlider.enable();

// To disable one handle
slider.noUiSlider.disable(1);
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');

function toggle(checkbox, slider, handleNumber) {

    // If the checkbox is checked, disabled the slider.
    // Otherwise, re-enable it.
    if (checkbox.checked) {
        slider.noUiSlider.disable(handleNumber);
    } else {
        slider.noUiSlider.enable(handleNumber);
    }
}

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(this, slider1);
});

checkbox2.addEventListener('click', function () {
    toggle(this, slider2, 0);
});

checkbox3.addEventListener('click', function () {
    toggle(this, slider2, 1);
});
§

Updating and reading slider options

noUiSlider has an update method that can change the 'margin', 'padding', 'limit', 'step', 'range', 'pips', 'tooltips', 'connect', '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 value null can be used to unset a previously set value.

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, false can be passed 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 multiple sliders are initiated using the same options object and a subset of them is updated 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
    },
    padding: 6,
    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');
var button3 = document.getElementById('update-3');
var button4 = document.getElementById('update-4');
var button5 = document.getElementById('update-5');
var button6 = document.getElementById('update-6');

button1.addEventListener('click', function () {
    updateSlider.noUiSlider.updateOptions({
        range: {
            'min': 20,
            'max': 50
        }
    });
});

button2.addEventListener('click', function () {
    updateSlider.noUiSlider.updateOptions({
        range: {
            'min': 10,
            'max': 40
        }
    });
});

button3.addEventListener('click', function () {
    updateSlider.noUiSlider.updateOptions({
        tooltips: true,
        pips: null
    });
});

button4.addEventListener('click', function () {
    updateSlider.noUiSlider.updateOptions({
        tooltips: false,
        pips: {
            mode: 'range',
            density: 3
        }
    });
});

button5.addEventListener('click', function () {
    updateSlider.noUiSlider.updateOptions({
        padding: 10,
    });
});

button6.addEventListener('click', function () {
    updateSlider.noUiSlider.updateOptions({
        padding: null,
    });
});
§

Styling

To style noUiSlider 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, the cssPrefix and cssClasses options can be used to reconfigure the markup.

Alternatively, to modify the default classes for all sliders, a modifiable reference to the default class list is available as noUiSlider.cssClasses.

CSS classes overview
Selector Effect
.noUi-target This class is added to the element noUiSlider.create() is called 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.
.noUi-touch-area An empty div within .noUi-handle. Can be styled larger if desired.
.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.
Overriding classes
// Change default classes for all sliders
// For example, all sliders will now have the className "noUi-target range-slider"
noUiSlider.cssClasses.target += ' range-slider';

noUiSlider.create(slider, {
    start: 80,
    range: {
        min: 0,
        max: 100
    },
    cssPrefix: 'noUi-', // defaults to 'noUi-',
    cssClasses: {
        // Full list of class names to override.
        // Does NOT extend the default classes.
        // The first class in String gets prefixed, the rest gets added as it is
    }
});