{"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).","language":"javascript","status":"active","last_verified":"Sun Apr 19","install":{"commands":["npm install nouislider"],"cli":null},"imports":["import * as noUiSlider from 'nouislider';\nimport 'nouislider/dist/nouislider.css';","import 'nouislider/dist/nouislider.min.css';","const noUiSlider = require('nouislider');","import type { noUiSliderOptions, API } from 'nouislider';"],"auth":{"required":false,"env_vars":[]},"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.","tag":null,"tag_description":null,"last_tested":null,"results":[]},"compatibility":null}