nouislider
Advanced tools
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.
noUiSlider is licensed WTFPL. You can use it for free and without any attribution, in any personal or commercial project. You may also fork the project and re-release it under another license you prefer.
An extensive documentation, including examples, options and configuration details, is available here: noUiSlider documentation.
bower install nouislider --save
npm install nouislider --save
null options are now handled consistently (#856);padding on one side of the slider could not exceed 50% (#865);Refactor of source code. There are no meaningful changes in the distributed files;
.noUi-target outside of .noUi-base (#842);.noUi-origin moving out of the page causes horizontal scrolling (#852);.noUi-handle has unintended margin (#854);noUiSlider 11 doesn't include any breaking API changes. Unless major changes were made to the stylesheet or you specifically depend on the handle/connect order in the DOM, there should be no issues upgrading.
.noUi-origin instead of .noUi-handle;.noUi-connects element holding all .noUi-connect elements;[data-value] property for .noUi-value in pips (#733);padding option can now take an array for different padding values at both sides of a slider (#822);useRequestAnimationFrame option. No longer needed with CSS transforms;multitouch option. Now enabled by default;set method might bypass margin option (#823);multitouch option (#793);updateOptions (#669);removePips method;ariaFormat option (controls aria-valuetext);null (#658);ownerDocument instead of document (#767);noUiSlider.version holds current version number;pips configuration (#721);padding option (#711);.noUi-handle-lower and .noUi-handle-upper classes removed in 9.0.0;connect options removed in 9.0.0;format option can be updated (#641);reset method the return slider to start values (#673);connect option is now implemented as a separate node;updateOptions now modifies the original options object. The reference in slider.noUiSlider.options remains up to date (#678);behaviour options (#664);rtl sliders, handles are now visually positioned from the sliders right/bottom edge;rtl sliders now fire in the same order as for ltr sliders (with incremental handleNumbers);Spectrum component is no longer direction aware;limit and margin must be divisible by step (if set);.noUi-stacking class. Handles now stack themselves;.noUi-handle-lower and .noUi-handle-upper classes;.noUi-background. Use .noUi-target instead;connect: 'lower' and connect: 'upper'. These settings are replaced by connect: [true, false];margin and limit calculated improperly after calling updateOptions with a new range option;range option was required in update, even when not updating it (#682);Devices/browsers tested:
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
}
});
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';
FAQs
noUiSlider is a lightweight JavaScript range slider.
The npm package nouislider receives a total of 242,371 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.