$.noUiSlider

jQuery Range Slider

$("#slider").noUiSlider({
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});
Download noUiSlider
This is noUiSlider.

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!

"Lightweight javascript range slider that works with jQuery or Zepto."

  • Responsive design friendly
  • Linking input fields
  • Touch support for iOS, Android & Windows (phone)
  • Dragable range
  • Works with jQuery (1.7+) or Zepto
  • No jQueryUI dependencies
  • Tested in IE7 - IE11, Chrome, Opera, Firefox & Safari
$('#range').noUiSlider({
	start: [ 20, 80 ],
	step: 10,
	margin: 20,
	connect: true,
	direction: 'rtl',
	orientation: 'vertical',
	
	// Configure tapping, or make the selected range dragable.
	behaviour: 'tap-drag',
	
	// Full number format support.
	format: wNumb({
		mark: ',',
		decimals: 1
	}),
	
	// Support for non-linear ranges by adding intervals.
	range: {
		'min': 0,
		'max': 100
	}
});

// Reading/writing + validation from an input? One line.
$('#range').Link('lower').to($('#value-input'));

// Write to a span? One line.
$('#range').Link('upper').to($('#value-span'), 'html');

// Optional addon: creating Pips (Percentage In Point);
$('#range').noUiSlider_pips({
	mode: 'steps',
	density: 2
});

Well written and lightweight

When using noUiSlider in your forms, users get all the functionality they've come to expect, and powerful API's make implementation easy. When gzipped and minified, noUiSlider and the default CSS theme take just 6293 Bytes.

Super simple API design

The noUiSlider API is compatible with the standard HTML input methods, so the slider is extremely easy to use. You can select a group of $('input[type="number"], select, .noUiSlider'), and calling .val(50) will just work.

Responsive all around

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?

noUiSlider supports IE7 and up, and of course the latest versions of the 'evergreen' browsers:
Chrome, Safari, Firefox and Opera.

Browser support

Let's get started!

Required scripts

noUiSlider requires jQuery 1.7.x or newer, or Zepto 1.0. Zepto's data module is no longer required.

To create a slider, call .noUiSlider() with your options on a jQuery element. If you'd like to see a minimal example, you can have a look at this minimal setup document.

Putting all your scripts in the page <head> will likely slow down your site. If you'd like to know why, consider reading this article by Yahoo!.

<!-- jQuery or Zepto -->
<script src="jquery / zepto.js"></script>

<!-- The noUiSlider script and stylesheet -->
<link href="jquery.nouislider.css" rel="stylesheet">

<!-- Use the 'full' version to get all documented features. -->
<!-- Includes wNumb, libLink and the pips add-on -->
<script src="jquery.nouislider.full.min.js"></script>