{"id":11467,"library":"nouislider","title":"noUiSlider: Lightweight JavaScript Range Slider","description":"noUiSlider is an unopinionated, lightweight, and accessible JavaScript range slider library designed for modern web applications. It offers GPU-animated performance, ensuring smooth operation even on older devices, and supports all modern browsers including IE > 9. Its key differentiators include having no external dependencies, full responsiveness, multi-touch support for various mobile platforms, and comprehensive accessibility features with ARIA and keyboard navigation. The current stable version is 15.8.1. The project maintains a regular release cadence, often issuing patch and minor releases to address bug fixes, add new features, and refine TypeScript definitions, as seen in its recent release history (e.g., 15.8.1, 15.8.0, 15.7.2).","status":"active","version":"15.8.1","language":"javascript","source_language":"en","source_url":"git://github.com/leongersen/noUiSlider","tags":["javascript","typescript"],"install":[{"cmd":"npm install nouislider","lang":"bash","label":"npm"},{"cmd":"yarn add nouislider","lang":"bash","label":"yarn"},{"cmd":"pnpm add nouislider","lang":"bash","label":"pnpm"}],"dependencies":[],"imports":[{"note":"noUiSlider exports a namespace object in ESM. The CSS must be imported separately for styling. For TypeScript, import types directly or use the `* as` import.","wrong":"import noUiSlider from 'nouislider';","symbol":"noUiSlider","correct":"import * as noUiSlider from 'nouislider';\nimport 'nouislider/dist/nouislider.css';"},{"note":"Include the minified CSS for production builds. The default `nouislider.css` is also available.","symbol":"nouislider.min.css","correct":"import 'nouislider/dist/nouislider.min.css';"},{"note":"For CommonJS environments, `require` loads the module. This is typically used in Node.js or older build setups.","symbol":"nouislider","correct":"const noUiSlider = require('nouislider');"},{"note":"TypeScript types for options and the returned API are available and recommended for type-safe usage.","symbol":"nouislider type","correct":"import type { noUiSliderOptions, API } from 'nouislider';"}],"quickstart":{"code":"import * as noUiSlider from 'nouislider';\nimport 'nouislider/dist/nouislider.css';\n\nconst sliderElement = document.createElement('div');\nsliderElement.id = 'mySlider';\ndocument.body.appendChild(sliderElement);\n\nconst slider = noUiSlider.create(sliderElement, {\n  start: [20, 80],\n  connect: true,\n  range: {\n    'min': 0,\n    'max': 100\n  },\n  tooltips: true,\n  pips: {\n    mode: 'steps',\n    stepped: true,\n    density: 4\n  }\n});\n\nslider.on('update', (values, handle) => {\n  console.log(`Slider updated: Handle ${handle} value: ${values[handle]}`);\n});\n\n// Example of setting new values programmatically\nsetTimeout(() => {\n  slider.set([30, 70]);\n  console.log('Slider values set to [30, 70] after 2 seconds.');\n}, 2000);","lang":"typescript","description":"This quickstart code demonstrates how to initialize a basic noUiSlider with two handles, connect the range, add tooltips and pips, and listen for update events. It also shows programmatic value setting."},"warnings":[{"fix":"Review and test custom stylesheets on Safari after upgrading to 15.5.0 or newer. Adjust CSS rules if visual regressions occur due to changed compositing behavior.","message":"Version 15.5.0 introduced a fix for compositing issues in Safari, which could potentially be a breaking change when using a custom stylesheet. Styles might need adjustment if relying on previous Safari rendering quirks.","severity":"breaking","affected_versions":">=15.5.0"},{"fix":"Use `import * as noUiSlider from 'nouislider';` and ensure variables interacting with the slider are typed correctly, e.g., `const slider: API = noUiSlider.create(...)`.","message":"When using TypeScript, remember that `noUiSlider.create` returns an API object (type `API`). Ensure your imports and variable typings correctly reflect this for proper type inference and checking.","severity":"gotcha","affected_versions":">=15.0.0"},{"fix":"Always include `import 'nouislider/dist/nouislider.css';` (or `.min.css`) in your application's entry point or relevant component file.","message":"noUiSlider requires its CSS file to be imported for correct visual rendering. Forgetting to import the CSS will result in an unstyled, unusable slider element.","severity":"gotcha","affected_versions":"All versions"},{"fix":"Switch to named or namespace imports (e.g., `import * as noUiSlider from 'nouislider';`) for ESM compatibility.","message":"Older versions of noUiSlider might have been imported using default imports, but modern versions, especially with ESM, explicitly export a namespace object. Default imports can lead to undefined errors.","severity":"deprecated","affected_versions":">=15.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import * as noUiSlider from 'nouislider';` in ESM or `const noUiSlider = require('nouislider');` in CJS. Also verify the package is correctly installed.","cause":"Attempting to call `create` on an `undefined` or incorrect import of `noUiSlider`, often due to a wrong import statement or attempting a default import where a namespace import is required.","error":"TypeError: noUiSlider.create is not a function"},{"fix":"Add `import 'nouislider/dist/nouislider.css';` (or the minified version) to your application's entry point or the component where the slider is used.","cause":"The noUiSlider CSS stylesheet has not been imported or is not correctly loaded by the bundler.","error":"Slider appears, but is unstyled or broken visually (e.g., handles are not positioned correctly)."},{"fix":"Refer to the noUiSlider documentation and the TypeScript definitions for the correct structure of options like `pips`, `range`, or `connect`. Ensure all required properties are present and correctly typed.","cause":"TypeScript type mismatch when providing options to `noUiSlider.create` or `set`, specifically for the `pips` or `range` options, indicating incorrect structure or missing properties.","error":"Argument of type '(...)' is not assignable to parameter of type 'Pips'."}],"ecosystem":"npm"}