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

- Disabling a slider or handles
- Updating slider options
- Styling noUiSlider

§

## 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.

Disable slider
Disable handle 1
Disable handle 2

    // 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
        }
    });