noUiSlider

JavaScript Range Slider

// <div id="slider"></div>
var slider = document.getElementById('slider');

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});
Installation
npm install nouislider
yarn add nouislider
// When using a bundler such as Webpack,
// include both noUiSlider and its stylesheet.
// Either import the default:
import noUiSlider from 'nouislider';
// Or the namespace:
import * as noUiSlider from 'nouislider';
import 'nouislider/dist/nouislider.css';

// Alternatively, you can include both files:
<link href="nouislider.css" rel="stylesheet">
<script src="nouislider.js"></script>

// You can also use the ES6 module distribution
<script type="module">
import noUiSlider from 'nouislider/dist/nouislider.mjs';
</script>
Star on Github
noUiSlider Range and Handles Reading & Setting Values Formatting Options Tapping, Dragging & Fixed Ranges Examples Events Scale/Pips Updating, Disabling & Styling Download

noUiSlider: lightweight JavaScript range slider with full touch support

  • Accessible with ARIA and keyboard support
  • Multi-Touch support on iOS, Android & Windows devices
  • GPU animated: no reflows, so fast; even on older devices
  • 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
    }
});
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];
});