nouislider

What is nouislider?

The 'nouislider' npm package is a lightweight JavaScript range slider library. It allows you to create highly customizable and responsive sliders with a variety of features such as multiple handles, tooltips, and more. It is particularly useful for creating user-friendly interfaces for selecting a range of values.

What are nouislider's main functionalities?

Basic Slider

This code creates a basic slider with two handles starting at 20 and 80, connected by a bar. The range of the slider is from 0 to 100.

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

Slider with Tooltips

This code creates a slider with tooltips that display the current value of each handle. The range of the slider is from 0 to 100.

const noUiSlider = require('nouislider');
const slider = document.getElementById('slider');
noUiSlider.create(slider, {
  start: [20, 80],
  tooltips: true,
  range: {
    'min': 0,
    'max': 100
  }
});

Vertical Slider

This code creates a vertical slider with two handles starting at 20 and 80. The range of the slider is from 0 to 100.

const noUiSlider = require('nouislider');
const slider = document.getElementById('slider');
noUiSlider.create(slider, {
  start: [20, 80],
  orientation: 'vertical',
  range: {
    'min': 0,
    'max': 100
  }
});

Slider with Stepping

This code creates a slider with steps of 10 units. The range of the slider is from 0 to 100.

const noUiSlider = require('nouislider');
const slider = document.getElementById('slider');
noUiSlider.create(slider, {
  start: [20, 80],
  step: 10,
  range: {
    'min': 0,
    'max': 100
  }
});

Other packages similar to nouislider

rc-slider

The 'rc-slider' package is a React component for creating sliders. It offers similar functionalities to 'nouislider' but is specifically designed for use with React. It provides a range of customization options and supports multiple handles, tooltips, and vertical orientation.

react-slider

The 'react-slider' package is another React component for creating sliders. It is lightweight and highly customizable, offering features such as multiple handles, custom styling, and support for both horizontal and vertical orientations. It is similar to 'nouislider' but tailored for React applications.

rangeslider.js

The 'rangeslider.js' package is a lightweight, dependency-free JavaScript library for creating sliders. It offers a range of customization options and supports both horizontal and vertical orientations. It is similar to 'nouislider' but does not require any external dependencies.

README

noUiSlider

noUiSlider is lightweight JavaScript range slider, originally developed to be a jQuery UI alternative.

It features cross-browser support, a wide range of options and support for a bunch of touch devices. It has been tested on Android phones, iPhone & iPad, Windows phone and touch-screen laptops and tablets and desktops.

All modern browsers and IE8+ are supported. The end result? A lean, extendible and bloat-less plugin that'll just do its job.

The best part? noUiSlider has no dependencies! As of version 8, jQuery is no longer required!

Oh, and the licensing terms are simple: just Do What the Fuck You Want with it.

Documentation

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

Changelog

8.2.1 (latest)

• Fixed #568 and #569

8.2.0

• Added 'start', 'end' and 'hover' events
• Added better tooltip formatting options
• Bugfixes, including an issues where a mouseup would be missed

8.1.0

• Fixed Microsoft Edge support
• Merged several pull requests containing bug fixes
• Fixed an issue where a slider handle could get 'stuck' to a mouse cursor after moving out of a window.
• Combed through code using a profiler, fixed some performance issues.
• Added support for basic tooltips.

8.0.0

Removed jQuery dependency! For more info and other changes, see the release information.

Devices

Devices/browsers tested:

• Surface Pro 3 (Windows 10)
• iPad Air 2 (iOS 9.0)
• iPad 3 (iOS 8.4)
• Moto E (Android 5.1, Chrome)
• Lumia 930 (WP10 mobile)
• Asus S400C (Windows 10, Touch + mouse)
  • Chrome
  • Firefox
  • Edge
  • IE11
  • IE10 (Emulated)
  • IE9 (Emulated)

Bower

Bower users can install all compiled and minified files easily using bower install nouislider --save. Supporting bower unfortunately means keeping all compiled and minified versions in the repository.

NPM

Install noUiSlider using the GitHub syntax: npm install leongersen/noUiSlider

Browserify

This library is UMD compatible, so you can use it in this way:

var noUiSlider = require('nouislider');

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

noUiSlider.create(slider, {
  start: 40,
  connect: "lower",
  range: {
    min: 0,
    max: 100
  }
});

Browser support

All major browsers are supported. To support IE8 you'll need to shim several ES5 features.

You can use polyfill.io to easily do so:

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--[if lte IE 8]>
<script src="https://cdn.polyfill.io/v2/polyfill.min.js"></script>
<![endif]-->

Version numbering

Version numbering follows the 'Semantic versioning' style. You'll find an excellent documentation at Semver.org.