noUiSlider

JavaScript Range Slider

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

noUiSlider.create(slider, {
	start: [20, 80],
	connect: true,
	range: {
		'min': 0,
		'max': 100
	}
});
npm install nouislider
yarn add 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 with full touch support

  • Responsive design friendly
  • Touch support for iOS, Android & Windows (phone)
  • No dependencies!
  • Tested in IE9 - IE11, Edge, Chrome, Opera, Firefox & Safari
Download noUiSlider

noUiSlider is a lightweight range slider with full touch support and a ton of features. It works with pretty much any device, whether it has a mouse, touchscreen or both, and it'll work great in responsive designs. Have you tried this documentation on your phone?

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

noUiSlider.create(range, {

	range: {
		'min': 1300,
		'max': 3250
	},

	step: 150,

	// Handles start at ...
	start: [ 1450, 2050, 2350, 3000 ],

	// ... must be at least 300 apart
	margin: 300,

	// ... but no more than 600
	limit: 600,

	// Display colored bars between handles
	connect: true,

	// Put '0' at the bottom of the slider
	direction: 'rtl',
	orientation: 'vertical',

	// Move handle on tap, bars are draggable
	behaviour: 'tap-drag',
	tooltips: true,
	format: wNumb({
		decimals: 0
	}),

	// Show a scale with the slider
	pips: {
		mode: 'steps',
		stepped: true,
		density: 4
	}
});
Showing values
// Give the slider dimensions
range.style.height = '400px';
range.style.margin = '0 auto 30px';

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];
});