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

# Slider values

§

## Handles

The number of handles can be set using the `start` option. This option accepts an array of initial handle positions. A handle is created for every provided value.

    var handlesSlider = document.getElementById('slider-handles');

    noUiSlider.create(handlesSlider, {
        start: [4000, 8000],
        range: {
            'min': [2000],
            'max': [10000]
        }
    });

§

### More than two handles

The number of handles in the `start` option is not limited to two. The connect option can be used between every handle.

    var handlesSlider4 = document.getElementById('slider-handles4');

    noUiSlider.create(handlesSlider4, {
        start: [4000, 8000, 12000, 16000],
        connect: [false, true, true, false, true],
        range: {
            'min': [2000],
            'max': [20000]
        }
    });

§

## Range

All values on the slider are part of a range. The range has a minimum and maximum value. If the minimum value is equal to the maximum value, handles are evenly spread across the slider.

    var rangeSlider = document.getElementById('slider-range');

    noUiSlider.create(rangeSlider, {
        start: [4000],
        range: {
            'min': [2000],
            'max': [10000]
        }
    });

Display the slider value

    var rangeSliderValueElement = document.getElementById('slider-range-value');

    rangeSlider.noUiSlider.on('update', function (values, handle) {
        rangeSliderValueElement.innerHTML = values[handle];
    });

§

### Stepping and snapping to values

The amount the slider changes on movement can be set using the `step` option.

    var stepSlider = document.getElementById('slider-step');

    noUiSlider.create(stepSlider, {
        start: [4000],
        step: 1000,
        range: {
            'min': [2000],
            'max': [10000]
        }
    });

Display the slider value

    var stepSliderValueElement = document.getElementById('slider-step-value');

    stepSlider.noUiSlider.on('update', function (values, handle) {
        stepSliderValueElement.innerHTML = values[handle];
    });

§

## Non-linear sliders

noUiSlider offers some powerful mechanisms that allow a slider to behave in a non-linear fashion. Sliders can be created with ever-increasing increments by specifying the value for the slider at certain intervals. Note how the handle in the example below starts at 30% of the slider width, even though `4000` is not 30% of the span between `2000` and `10000`.

    var nonLinearSlider = document.getElementById('slider-non-linear');

    noUiSlider.create(nonLinearSlider, {
        start: [4000],
        range: {
            'min': [2000],
            '30%': [4000],
            '70%': [8000],
            'max': [10000]
        }
    });

Display the slider value

    var nonLinearSliderValueElement = document.getElementById('slider-non-linear-value');

    // Show the value for the *last* moved handle.
    nonLinearSlider.noUiSlider.on('update', function (values, handle) {
        nonLinearSliderValueElement.innerHTML = values[handle];
    });

§

### Stepping in non-linear sliders

For every range-segment in a non-linear slider, stepping can be set. Note how in the example below the slider doesn't step until it reaches `500`. From there on, it changes in increments of `500`, until it reaches `4000`, where increments now span `1000`.

Note that the `step` option, when set, only applies to the first range-segment.

    var nonLinearStepSlider = document.getElementById('slider-non-linear-step');

    noUiSlider.create(nonLinearStepSlider, {
        start: [500, 4000],
        range: {
            'min': [0],
            '10%': [500, 500],
            '50%': [4000, 1000],
            'max': [10000]
        }
    });

Display the slider value

    var nonLinearStepSliderValueElement = document.getElementById('slider-non-linear-step-value');

    nonLinearStepSlider.noUiSlider.on('update', function (values) {
        nonLinearStepSliderValueElement.innerHTML = values.join(' - ');
    });

§

### Snapping between steps

When a non-linear slider has been configured, the `snap` option can be set to `true` to force the slider to jump between the specified values.

    var snapSlider = document.getElementById('slider-snap');

    noUiSlider.create(snapSlider, {
        start: [0, 500],
        snap: true,
        connect: true,
        range: {
            'min': 0,
            '10%': 50,
            '20%': 100,
            '30%': 150,
            '40%': 500,
            '50%': 800,
            'max': 1000
        }
    });

Display the slider value

    var snapValues = [
        document.getElementById('slider-snap-value-lower'),
        document.getElementById('slider-snap-value-upper')
    ];

    snapSlider.noUiSlider.on('update', function (values, handle) {
        snapValues[handle].innerHTML = values[handle];
    });

§

### Getting the next slider steps

Using the `steps` API, the sliders previous and next steps can be retrieved.

The examples section demonstrates how this API can be used.

    // Example slider:
    noUiSlider.create(slider, {
    	start: [20, 80],
    	range: {
    		'min': [0],
    		'10%': [10, 10],
    		'50%': [80, 50],
    		'80%': 150,
    		'max': 200
    	}
    });

    // Both handles step 10 up and down
    .set([30, 50])
    .steps() => [[10,10],[10,10]]

    // Second handle now steps up 50
    .set([30, 80])
    .steps() => [[10,10],[10,50]]

    // Second handle now steps down 50, steps up 20 to
    // reach 150 at 80% of the slider
    .set([30, 130])
    .steps() => [[10,10],[50,20]]

    // Second handle steps down 20 to go back to 130.
    // the is no step value to go up
    .set([30, 150])
    .steps() => [[10,10],[20,false]]

    // Second handle has no downward step,
    // is at the end of the slider
    .set([30, 200])
    .steps() => [[10,10],[false,null]]