noUiSlider

JavaScript Range Slider

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

noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});
Download noUiSlider
noUiSlider Slider range and handles Reading & Setting values Options Tapping, dragging & fixed ranges Examples Events Scale/Pips More... Download noUiSlider

noUiSlider: lightweight JavaScript range slider


noUiSlider is a range slider without bloat. It offers a ton off features, and it is as small, lightweight and minimal as possible, which is great for mobile use on the many supported devices, including iPhone, iPad, Android devices & Windows (Phone) 8 desktops, tablets and all-in-ones. It works on desktops too, of course!

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

range.style.height = '400px';
range.style.margin = '0 auto 30px';

noUiSlider.create(range, {
	start: [ 1450, 2050, 2350, 3000 ], // 4 handles, starting at...
	margin: 300, // Handles must be at least 300 apart
	limit: 600, // ... but no more than 600
	connect: true, // Display a colored bar between the handles
	direction: 'rtl', // Put '0' at the bottom of the slider
	orientation: 'vertical', // Orient the slider vertically
	behaviour: 'tap-drag', // Move handle on tap, bar is draggable
	step: 150,
	tooltips: true,
	format: wNumb({
		decimals: 0
	}),
	range: {
		'min': 1300,
		'max': 3250
	},
	pips: { // Show a scale with the slider
		mode: 'steps',
		stepped: true,
		density: 4
	}
});
Showing values
var valuesDivs = [
	document.getElementById('range-value-1'),
	document.getElementById('range-value-2'),
	document.getElementById('range-value-3'),
	document.getElementById('range-value-4')
];

var diffDivs = [
	document.getElementById('range-diff-1'),
	document.getElementById('range-diff-2'),
	document.getElementById('range-diff-3')
];

// When the slider value changes, update the input and span
range.noUiSlider.on('update', function( values, handle ) {
	valuesDivs[handle].innerHTML = values[handle];
	diffDivs[0].innerHTML = values[1] - values[0];
	diffDivs[1].innerHTML = values[2] - values[1];
	diffDivs[2].innerHTML = values[3] - values[2];
});

"Lightweight JavaScript range slider with full touch support."

  • Responsive design friendly
  • Touch support for iOS, Android & Windows (phone)
  • Draggable range
  • No jQuery, jQueryUI or other dependencies
  • Tested in IE9 - IE11, Edge, Chrome, Opera, Firefox & Safari

noUiSlider works with pretty much any device, mouse, touchscreen or both, and it'll work beautifully in responsive designs. Have you tried this documentation on your phone?

§

Getting started

noUiSlider has no dependencies, so you don't need jQuery, jQuery UI, Zepto, etc. to use it.

Putting all your scripts in the page <head> will slow down your site. If you'd like to know why, consider reading this article by Yahoo!. Put the slider CSS in your <head>, and the script at the end of the <body>.

To create a slider, call noUiSlider.create() with an element and your options.

<!-- In <head> -->
<link href="nouislider.min.css" rel="stylesheet">

<!-- In <body> -->
<script src="nouislider.min.js"></script>
§

Browser support

noUiSlider supports IE9 and up, and the latest versions of Edge, Chrome, Safari, Firefox and Opera.