React Wrapper for noUiSlider

Common errors

• TypeError: Cannot read properties of undefined (reading '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.
  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.

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

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

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

Warnings

• breaking 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.
  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`.
• gotcha 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.
  Fix: Ensure `import 'nouislider/distribute/nouislider.css';` is present in your entry file or a component where the slider is used.
• gotcha 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.
  Fix: Always consult the official noUiSlider documentation (refreshless.com/nouislider) before filing issues related to slider behavior or options.
• gotcha 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.
  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.
• deprecated 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.
  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.

Install

• npm install nouislider-react npm
• yarn add nouislider-react yarn
• pnpm add nouislider-react pnpm

Imports

• Nouislider
  wrong:

  import { Nouislider } from 'nouislider-react';

  correct:

  import Nouislider from 'nouislider-react';

  The main component is a default export.
• nouislider.css
  wrong:

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

  correct:

  import 'nouislider/distribute/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).

Quickstart

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;