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

More...

§

Disabling a slider

Disabling a slider is identical to disabling a checkbox or textarea; simply set the disabled attribute.

A disabled slider can't be changed by sliding, click or touching, but you can still change its value using the .set() method. You can use CSS to show the disabled state. The default theme also sets a not-allowed cursor.

The slider below is disabled when the checkbox gets checked, and re-enabled when it is unchecked.

Individual handles can also be disabled by setting the disabled attribute on a .noUi-origin element.


// To disable
slider.setAttribute('disabled', true);

// To re-enable
slider.removeAttribute('disabled');

// To disable one handle
var origins = slider.getElementsByClassName('noUi-origin');
origins[0].setAttribute('disabled', true);
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'),
	origins = slider2.getElementsByClassName('noUi-origin');

function toggle ( element ){

	// If the checkbox is checked, disabled the slider.
	// Otherwise, re-enable it.
	if ( this.checked ) {
		element.setAttribute('disabled', true);
	} else {
		element.removeAttribute('disabled');
	}
}

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

checkbox2.addEventListener('click', function(){
	toggle.call(this, origins[0]);
});

checkbox3.addEventListener('click', function(){
	toggle.call(this, origins[1]);
});
§

Updating and reading slider options

noUiSlider has an updateOptions(newOptions, fireSetEvent) method that can change the 'margin', 'limit', 'step', 'range', '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. Note that events are not unbound when destroying a slider.

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, you can pass false 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 you initiate multiple sliders using the same options object and update a subset of them later, this will move the options property out of sync with the actual slider options.

The 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'),
	updateSliderValue = document.getElementById('slider-update-value');

noUiSlider.create(updateSlider, {
	range: {
		'min': 0,
		'max': 40
	},
	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'),
	button2 = document.getElementById('update-2');

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

button2.addEventListener('click', function(){
	updateSliderRange(10, 40);
});
§

Styling

Styling noUiSlider is easy. The default stylesheet contains helpful comments to get a head start. I strongly recommend using the default stylesheet as a starting point when re-styling noUiSlider.

If your styling system doesn't match the convention in noUiSlider, you can use the cssPrefix and cssClasses options to reconfigure the markup.

Things to watch out for

  • If you want the handles to stay within the slider bar (instead of the default overlap), have a look at the CSS detailed to the right. Add the styles to your stylesheet and give your element the noUi-extended class for this effect.
  • The .noUi-connect and .noUi-background classes are applied to various elements.
  • To position your handles on the center of its relative position, it should have a negative offset of half the handle width. See the default theme for reference.
CSS classes overview
Selector Effect
.noUi-target This class is added to the element you call .noUiSlider() 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. Style these any way you like!
.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
noUiSlider.create(slider, {
	start: 80,
	range: {
		min: 0,
		max: 100
	},
	cssPrefix: 'noUi-', // defaults to 'noUi-',
	cssClasses: {
		// Full list of classnames to override. Does NOT extend the default classes.
		// Have a look at the source for the full, current list:
		// https://github.com/leongersen/noUiSlider/blob/master/src/js/options.js#L316
	}
});
Containing handles within the slider bar (horizontal)
.noUi-horizontal.noUi-extended {
	padding-right: 32px;
}
.noUi-horizontal.noUi-extended .noUi-handle {
	left: -1px;
}
.noUi-horizontal.noUi-extended .noUi-origin  {
	right: -32px;
}
Containing handles within the slider bar (vertical)
.noUi-vertical.noUi-extended {
	padding-bottom: 32px;
}
.noUi-vertical.noUi-extended .noUi-handle {
	top: -1px;
}
.noUi-vertical.noUi-extended .noUi-origin  {
	bottom: -32px;
}