/noUiSlider

noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits wonderfully in responsive designs and has no dependencies.

Primary LanguageJavaScriptMIT LicenseMIT

noUiSlider

noUiSlider is a lightweight JavaScript range slider.

  • No dependencies
  • 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

License

noUiSlider is licensed MIT. You can use it for free and without any attribution, in any personal or commercial project.

Documentation

An extensive documentation, including examples, options and configuration details, is available here: noUiSlider documentation.

Devices

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)

Testing

Cross-browser testing kindly provided by BrowserStack.

Tested with BrowserStack

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'
	})
]
...

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

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