What is nouislider?

leongersen/nouislider — explained in plain English

Analysis updated 2026-06-26

★ 5,799TypeScriptAudience · developerComplexity · 2/5LicenseSetup · easy

Mindmap

mindmap
  root((noUiSlider))
    What it does
      Range slider
      Touch support
      Keyboard nav
    Features
      ARIA labels
      GPU animation
      No dependencies
    Tech
      TypeScript
      JavaScript
      CSS
    Use cases
      Price filters
      Settings sliders
      Step controls

mindmap root((noUiSlider)) What it does Range slider Touch support Keyboard nav Features ARIA labels GPU animation No dependencies Tech TypeScript JavaScript CSS Use cases Price filters Settings sliders Step controls

Click or tap to explore — scroll the page freely

What do people build with it?

USE CASE 1

Add a price range filter to a shopping page with two draggable handles that update a price display in real time.

USE CASE 2

Build a settings control for volume or brightness that works smoothly on both touch and mouse input.

USE CASE 3

Create an accessible range input that screen readers can describe to users via ARIA attributes.

USE CASE 4

Add a step-based slider to a survey form so users pick a value from a fixed set of options.

What is it built with?

TypeScriptJavaScriptCSS

How does it compare?

	leongersen/nouislider	lightdash/lightdash	opencoworkai/open-codesign
Stars	5,799	5,798	5,800
Language	TypeScript	TypeScript	TypeScript
Setup difficulty	easy	hard	easy
Complexity	2/5	4/5	2/5
Audience	developer	data	vibe coder

Figures from each repo's GitHub metadata at analysis time.

How do you get it running?

Difficulty · easy Time to first run · 5min

Use freely for any purpose, including commercial use, as long as you keep the copyright notice.

So what is it?

noUiSlider is a range slider for web pages: the kind of UI control where you drag a handle along a track to pick a value or a range of values, like setting a price range on a shopping site. It is written in TypeScript and distributed as a small JavaScript library with no other libraries required. The slider is built to work on modern browsers as well as Internet Explorer 9 and above. It responds to touch gestures on Android, iOS, and Windows touch devices, and also supports keyboard navigation. Screen readers get proper accessibility support through ARIA attributes, which are labels embedded in the HTML that help assistive technology describe controls to users who cannot see the screen. On the performance side, the slider uses GPU animation to move the handle when you drag it. This avoids a process called reflow, where the browser recalculates page layout. The result is smooth movement even on older or slower devices. Because it has no dependencies and is designed to fit into any page layout, it works well in responsive designs that adapt to different screen sizes. The library comes with thorough documentation and many examples on the project's website, and there is a large collection of answered questions on Stack Overflow for common customization scenarios. noUiSlider is released under the MIT license, meaning it can be used for free in personal or commercial projects without attribution requirements.

Copy-paste prompts

Prompt 1

Add a noUiSlider price range filter to my e-commerce product listing page, two handles, values $0, $500, update a label on every drag event.

Prompt 2

Set up a noUiSlider with 5 fixed step values for a survey form and read the selected value when the form is submitted.

Prompt 3

How do I style a noUiSlider to match my brand colors without breaking its GPU animation performance?

Prompt 4

Make my noUiSlider fully keyboard-accessible and verify it passes a basic screen-reader test.

Frequently asked questions