$.noUiSlider

jQuery Range Slider

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

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

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!

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: [
			new Link({
				target: $("#value-input")
			})
		],
		upper: [
			new 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 5980 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?