{"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.","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install nouislider-react"],"cli":null},"imports":["import Nouislider from 'nouislider-react';","import 'nouislider/distribute/nouislider.css';","import type { NouisliderProps } from 'nouislider-react';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}