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