Registry / web-framework / nouislider-react

nouislider-react

library3.4.2jsnpmunverified

nouislider-react is a React component wrapper for the popular noUiSlider library, providing a declarative way to integrate highly customizable range sliders into React applications. The package is currently at version 3.4.2 and aims to be a well-maintained alternative to other React wrappers for noUiSlider, explicitly stating its purpose to address maintenance issues found in similar packages. It maintains a regular, though not strictly scheduled, release cadence, primarily focusing on bug fixes, dependency updates, and minor feature enhancements. Key differentiators include direct exposure of all underlying noUiSlider options, support for additional React-specific properties like `clickablePips`, and comprehensive TypeScript type definitions, making it suitable for modern React and TypeScript projects. Developers should consult the original noUiSlider documentation for core slider configuration.

web-framework

npm install nouislider-react

github ↗package ↗homepage ↗

INSTALL

IMPORT

SIG · NOUISLIDER-REACT

nouislider-react

web-frameworkjavascriptv3.4.2

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

Nouislider

✓ import Nouislider from 'nouislider-react';

✗ import { Nouislider } from 'nouislider-react';

The main component is a default export.

nouislider.css

✓ import 'nouislider/distribute/nouislider.css';

✗ import 'nouislider-react/dist/nouislider.css';

The CSS is part of the original `nouislider` package and must be imported separately. Incorrect paths are a common mistake.

NouisliderProps

✓ import type { NouisliderProps } from 'nouislider-react';

Types are shipped with the package for TypeScript projects. Specific type names might vary based on usage (e.g., event handler types).

This quickstart demonstrates how to import and render a basic range slider with two handles, showing connection and tooltips, and logging updates to the console.

import React from 'react'; import Nouislider from 'nouislider-react'; import 'nouislider/distribute/nouislider.css'; const MySlider = () => ( <div style={{ padding: '30px' }}> <Nouislider range={{ min: 0, max: 100 }} start={[20, 80]} connect tooltips onUpdate={(values, handle, unencoded, tap, positions) => { console.log(`Slider values: ${values}`); }} /> </div> ); export default MySlider;

Debug

Known issues

breakingThe way to access the underlying noUiSlider instance via a `ref` changed significantly in version 3.3.0. Direct `ref` on the component no longer works; instead, you must use the `instanceRef` prop.

fix

Replace `ref={myRef}` with `instanceRef={instance => { if (instance) myRef.current = instance; }}`. The `instance` property of the `noUiSlider` object will then contain methods like `set` or `get`.

affects: >=3.3.0

gotchaIt is crucial to import the `nouislider.css` stylesheet for the slider to render correctly and be functional. Forgetting this import will result in an unstyled or visually broken slider.

fix

Ensure `import 'nouislider/distribute/nouislider.css';` is present in your entry file or a component where the slider is used.

affects: >=1.0.0

gotchaMany issues arise from not fully understanding the core `noUiSlider` library's options and event handling. The `nouislider-react` component directly passes most props to the underlying library.

fix

Always consult the official noUiSlider documentation (refreshless.com/nouislider) before filing issues related to slider behavior or options.

affects: >=1.0.0

gotchaVersion 3.4.2 introduced a fix for scenarios where the slider might be initialized multiple times, leading to unexpected behavior or errors. If you're encountering issues with slider re-initialization or updates after component re-renders, ensure you are on this version or newer.

fix

Upgrade to `nouislider-react@3.4.2` or higher. Review component lifecycle to ensure the slider isn't being mounted/unmounted or re-initialized unnecessarily.

affects: <3.4.2

deprecatedVersion 3.3.4 was deprecated shortly after its release due to a bug fix for the `format` option that was not fully resolved, leading to version 3.3.5.

fix

Avoid using version 3.3.4. If you are on this version, upgrade to 3.3.5 or later to benefit from the corrected `format` handling and other fixes.

affects: 3.3.4

Errors

Common errors & fixes

TypeError: Cannot read properties of undefined (reading 'set')

Attempting to access `noUiSlider` methods (like `set`, `get`) directly from a React `ref` object after version 3.3.0, which changed the ref handling.

fix

Use the `instanceRef` prop introduced in v3.3.0 to get the direct `noUiSlider` instance. For example, `instanceRef={instance => { this.sliderInstance = instance; }}` and then `this.sliderInstance.noUiSlider.set(...)`.

Slider not appearing, or appearing unstyled and non-functional.

The required `nouislider.css` stylesheet has not been imported or the path is incorrect.

fix

Add `import 'nouislider/distribute/nouislider.css';` to your application's entry point or the component where the slider is used. Ensure the `nouislider` package is correctly installed.

TypeScript error: Property 'format' does not exist on type 'NouisliderProps' or 'Property 'onUpdate' does not exist on type 'NouisliderProps'.

Outdated TypeScript declarations or incorrect type usage, particularly regarding specific options or event handlers that were fixed in minor updates.

fix

Update `nouislider-react` to the latest version. For `format` issues, ensure you are on version 3.3.5 or later. For event handlers, check the types provided by the latest package version.

Slider handles do not move, or events (onUpdate, onChange) are not firing correctly.

Issues with event handler binding or internal slider initialization, which were addressed in patch releases.

fix

Upgrade `nouislider-react` to version 3.4.0 (or newer) to benefit from fixes to event handler registration. For issues with initial setup, ensure `nouislider-react@3.4.2` or later is used.

Upgrade

Version history

3.4.2latest on npm

Audit

Dependencies

nouisliderrequiredCore slider functionality; required peer dependency.

reactrequiredReact framework; required peer dependency.

Agent activity

2 hits · last 30 days

node

Resources

githubhttps://github.com/mmarkelov/react-nouislider ↗

packagehttps://www.npmjs.com/package/nouislider-react ↗

homepagehttps://leongersen.github.io/nouislider/ ↗