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]]