noUiSlider Getting started Slider Values Options and Settings Examples Contact Download

$.noUiSlider

jQuery Range Slider

$("#slider").noUiSlider({
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});
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
80,0
$("#features").noUiSlider({
	start: [20, 80],
	step: 10,
	margin: 20,
	connect: true,
	direction: 'rtl',
	orientation: 'vertical',
	behaviour: 'tap-drag',
	range: {
		'min': 0,
		'max': 100
	},
	serialization: {
		lower: [
			$.Link({
				target: $("#value-input")
			})
		],
		upper: [
			$.Link({
				target: $("#value-span"),
				method: "html"
			})
		],
		format: {
			mark: ',',
			decimals: 1
		}
	}
});

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?