noUiSlider Slider range and handles Reading & Setting values Options Tapping, dragging & fixed ranges Examples Events Scale/Pips More... Download noUiSlider

Getting and setting slider values

§

Reading slider values

noUiSlider has an API with two simple methods: .get() and .set(). To get the current slider value:

slider.noUiSlider.get();

For one-handle sliders, calling .get() will return the value. For two-handle sliders, an array[value, value] will be returned.

§

Setting slider values

noUiSlider will keep your values within the slider range, which saves you a bunch of validation.

If you have configured the slider to use one handle, you can change the current value by passing a number to the .set() method. If you have two handles, pass an array. One-handled sliders will also accept arrays.

Within an array, you can set one position to null if you want to leave a handle unchanged.

To return to the initial slider values, you can use the .reset() method. This will only reset the slider values.

var slider = document.getElementById('slider');

noUiSlider.create(slider, /* { options } */);

// Set one handled slider
slider.noUiSlider.set(10);
slider.noUiSlider.set([150]);

// Set the upper handle,
// don't change the lower one.
slider.noUiSlider.set([null, 14]);

// Set both slider handles
slider.noUiSlider.set([13.2, 15.7]);

// Return to the 'start' values
// Does NOT reset any other slider properties
slider.noUiSlider.reset();
§

Example

Clicking the button below sets the slider, which uses a range from 0 to 100, to 20.

var slider = document.getElementById('slider');

noUiSlider.create(slider, {
	start: [ 80 ],
	range: {
		'min': [   0 ],
		'max': [ 100 ]
	}
});
Handling button presses
// Set the slider value to 20
document.getElementById('write-button').addEventListener('click', function(){
	slider.noUiSlider.set( 20 );
});

// Read the slider value.
document.getElementById('read-button').addEventListener('click', function(){
	alert( slider.noUiSlider.get() );
});
§

Number formatting

To format the slider output, noUiSlider offers a format option. Simply specify to and from functions to encode and decode the values. See manual formatting to the right for usage information.

By default, noUiSlider will format output with 2 decimals.

Manual formatting can be very tedious, so noUiSlider has support for the wNumb formatting library. wNumb offers a wide range of options and provides number validation.

Formatting with wNumb
var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
	start: [ 20000 ],
	step: 1000,
	range: {
		'min': [ 20000 ],
		'max': [ 80000 ]
	},
	format: wNumb({
		decimals: 3,
		thousand: '.',
		postfix: ' (US $)',
	})
});
Manual formatting
var sliderFormat = document.getElementById('slider-format');

noUiSlider.create(sliderFormat, {
	start: [ 20 ],
	step: 10,
	range: {
		'min': [ 20 ],
		'max': [ 80 ]
	},
	format: {
	  to: function ( value ) {
		return value + ',-';
	  },
	  from: function ( value ) {
		return value.replace(',-', '');
	  }
	}
});
Linking the input field
var inputFormat = document.getElementById('input-format');

sliderFormat.noUiSlider.on('update', function( values, handle ) {
	inputFormat.value = values[handle];
});

inputFormat.addEventListener('change', function(){
	sliderFormat.noUiSlider.set(this.value);
});