nouislider
Advanced tools
noUiSlider is lightweight JavaScript range slider, originally developed to be a jQuery UI alternative.
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.
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
}
});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.
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.
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.
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.
An extensive documentation, including examples, options and configuration details, is available here: noUiSlider documentation.
window exists. #503, #533, #617 and #628:focus style applied to wrong element. #631step option is lost on updating. #619options should be the original options, not the parsed set. #607set. #602options and pips.margin: 0 throwing an error.set firing when calling slider.noUiSlider.set with a null value.Removed jQuery dependency! For more info and other changes, see the release information.
Devices/browsers tested:
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.
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
}
});
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 follows the 'Semantic versioning' style. You'll find an excellent documentation at Semver.org.
FAQs
noUiSlider is a lightweight JavaScript range slider.
The npm package nouislider receives a total of 152,977 weekly downloads. As such, nouislider popularity was classified as popular.
We found that nouislider demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Snyk's use of malicious npm packages for research raises ethical concerns, highlighting risks in public deployment, data exfiltration, and unauthorized testing.
Research
Security News
Socket researchers found several malicious npm packages typosquatting Chalk and Chokidar, targeting Node.js developers with kill switches and data theft.
Security News
pnpm 10 blocks lifecycle scripts by default to improve security, addressing supply chain attack risks but sparking debate over compatibility and workflow changes.