{"id":11466,"library":"nouislider-react","title":"React Wrapper for noUiSlider","description":"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.","status":"active","version":"3.4.2","language":"javascript","source_language":"en","source_url":"https://github.com/mmarkelov/react-nouislider","tags":["javascript","react","nouislider","slider","component","reactjs","range","typescript"],"install":[{"cmd":"npm install nouislider-react","lang":"bash","label":"npm"},{"cmd":"yarn add nouislider-react","lang":"bash","label":"yarn"},{"cmd":"pnpm add nouislider-react","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core slider functionality; required peer dependency.","package":"nouislider","optional":false},{"reason":"React framework; required peer dependency.","package":"react","optional":false}],"imports":[{"note":"The main component is a default export.","wrong":"import { Nouislider } from 'nouislider-react';","symbol":"Nouislider","correct":"import Nouislider from 'nouislider-react';"},{"note":"The CSS is part of the original `nouislider` package and must be imported separately. Incorrect paths are a common mistake.","wrong":"import 'nouislider-react/dist/nouislider.css';","symbol":"nouislider.css","correct":"import 'nouislider/distribute/nouislider.css';"},{"note":"Types are shipped with the package for TypeScript projects. Specific type names might vary based on usage (e.g., event handler types).","symbol":"NouisliderProps","correct":"import type { NouisliderProps } from 'nouislider-react';"}],"quickstart":{"code":"import React from 'react';\nimport Nouislider from 'nouislider-react';\nimport 'nouislider/distribute/nouislider.css';\n\nconst MySlider = () => (\n  <div style={{ padding: '30px' }}>\n    <Nouislider\n      range={{ min: 0, max: 100 }}\n      start={[20, 80]}\n      connect\n      tooltips\n      onUpdate={(values, handle, unencoded, tap, positions) => {\n        console.log(`Slider values: ${values}`);\n      }}\n    />\n  </div>\n);\n\nexport default MySlider;","lang":"typescript","description":"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."},"warnings":[{"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`.","message":"The 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.","severity":"breaking","affected_versions":">=3.3.0"},{"fix":"Ensure `import 'nouislider/distribute/nouislider.css';` is present in your entry file or a component where the slider is used.","message":"It 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Always consult the official noUiSlider documentation (refreshless.com/nouislider) before filing issues related to slider behavior or options.","message":"Many 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.","severity":"gotcha","affected_versions":">=1.0.0"},{"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.","message":"Version 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.","severity":"gotcha","affected_versions":"<3.4.2"},{"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.","message":"Version 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.","severity":"deprecated","affected_versions":"3.3.4"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"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(...)`.","cause":"Attempting to access `noUiSlider` methods (like `set`, `get`) directly from a React `ref` object after version 3.3.0, which changed the ref handling.","error":"TypeError: Cannot read properties of undefined (reading 'set')"},{"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.","cause":"The required `nouislider.css` stylesheet has not been imported or the path is incorrect.","error":"Slider not appearing, or appearing unstyled and non-functional."},{"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.","cause":"Outdated TypeScript declarations or incorrect type usage, particularly regarding specific options or event handlers that were fixed in minor updates.","error":"TypeScript error: Property 'format' does not exist on type 'NouisliderProps' or 'Property 'onUpdate' does not exist on type 'NouisliderProps'."},{"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.","cause":"Issues with event handler binding or internal slider initialization, which were addressed in patch releases.","error":"Slider handles do not move, or events (onUpdate, onChange) are not firing correctly."}],"ecosystem":"npm"}