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>
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?

1450
2050
2350
2950
1300
1450
1600
1750
1900
2050
2200
2350
2500
2650
2800
2950
3100
3250
2950 - 600 - 2350 - 300 - 2050 - 600 - 1450 
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];
});