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 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.

It can be used 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.

Contributing

See Contributing.

Sponsorship

noUiSlider is a stable project that still receives a lot of feature requests. A lot of these are interesting, but require a good amount of effort to implement, test and document. Sponsorship of this project will allow me to spend some more of my time on these feature requests.

Please consider sponsoring the project by clicking the "❤ Sponsor" button above. Thanks!

Tooling

Cross-browser testing kindly provided by BrowserStack.