noUiSlider


// <div id="slider"></div>
var slider = document.getElementById('slider'); noUiSlider.create(slider, { start: [20, 80], connect: true, range: { 'min': 0, 'max': 100 }
});
npm install nouislider
yarn add nouislider
// When using a bundler such as Webpack,
// include both noUiSlider and its stylesheet:
import noUiSlider from 'nouislider';
import 'nouislider/distribute/nouislider.css'; // Alternatively, you can include both files:
<link href="nouislider.css" rel="stylesheet">
<script src="nouislider.js"></script>

  • Multi-Touch support for iOS, Android & Windows (phone)
  • Accessible with ARIA and keyboard support
  • Responsive design friendly
  • No dependencies
  • Tested in IE9 - IE11, Edge, Chrome, Firefox & Safari
Download noUiSlider

noUiSlider is a lightweight range slider with multi-touch support and a ton of features. It supports non-linear ranges, requires no external dependencies, has keyboard support, and it works 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 }
});
// 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];
});