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



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

// 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 {

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(){, slider1);

checkbox2.addEventListener('click', function(){, origins[0]);

checkbox3.addEventListener('click', function(){, origins[1]);

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

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 undesired behaviour, you can pass false as the second parameter, fireSetEvent.

To update another option, destroy the slider (slider.noUiSlider.destroy()) and create a new one. Note that events are not unbound when destroying a slider.

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 class="update-button" id="update-2">
	Set range [10, 40]
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 ) {
		range: {
			'min': min,
			'max': max
button1.addEventListener('click', function(){
	updateSliderRange(20, 50);

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


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.
.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-background Styling class for setting properties related to the slider background.
.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:
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;