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 Updating, Disabling & Styling Download

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'); = '400px'; = '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 = [

var diffDivs = [

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