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 IE9+ 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, Query is no longer required!

Oh, and the licensing terms are simple: just do what you want.

---

Quick note (July 10, 2015): I'll be on vacation for the next three months, so support on this library will be very limited. I'm sorry for any inconvenience caused. I'll get back to you asap.

---

Documentation

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

Changelog

###8.0.2 Fix #464, added NPM information;

###8.0.1 Fixed an issue with IE11 on touch devices.

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

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

Version numbering

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