JavaScript range slider – noUiSlider. Modern and responsive!

noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies. You can create horizontal and vertical sliders!

JavaScript range slider – responsive and dependency free

Looking for a range slider? Try noUiSlider! It is a lightweight JavaScript range slider. A good library with full multi-touch support. Perfect for responsive designs. No dependencies.

Main features:

– All modern browsers and IE > 9 are supported
– Fully responsive
– Multi-touch support on Android, iOS and Windows devices
– Accessible with aria and keyboard support
– Tons of examples and answered Stack Overflow questions
– No dependencies

Devices/browsers tested:

Surface Pro 3 (Windows 10)
iPad Air 2 (iOS 9.3)
iPad 3 (iOS 8.4)
Moto E (Android 5.1, Chrome)
Lumia 930 (WP8.1, IE10 mobile)
Lumia 930 (WM10, Edge)
OnePlus 3 (Android 6)
Chrome
Firefox
Asus S400C (Windows 10, Touch + mouse)
Chrome
Firefox
Edge
IE11
IE10 (Emulated)
IE9 (Emulated)

noUiSlider - JavaScript range slider
noUiSlider – JavaScript range slider

Using with Webpack

In order to use this with webpack, the easiest way to work with it is by using the ProvidePlugin:

// webpack.config.js
var webpack = require('webpack');
...
plugins: [
  new webpack.ProvidePlugin({
    noUiSlider: 'nouislider'
  })
]
...

Setup

npm install nouislider

# or

yarn add nouislider

Usage

If you’re using ES6 imports, a simple import with side effect is enough:

import 'nouislider';
import 'nouislider/distribute/nouislider.css';
// ...

Sample:

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

noUiSlider.create(slider, {
    start: [20, 80],
    connect: true,
    range: {
        'min': 0,
        'max': 100
    }
});

License: MIT

GitHub

https://github.com/leongersen/noUiSlider/

Homepage

https://refreshless.com/nouislider/

scraperapi

See also

HTML5 range slider input – rangeslider.js

Cube Slider – awesome CSS3 3D images slider

iOS 7 like JavaScript range slider solution

jQuery and Bootstrap color picker sliders

Enjoy JavaScript range slider in your projects.