explaingit

leongersen/nouislider

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

TLDR

A lightweight, dependency-free JavaScript range slider that supports touch, keyboard navigation, and ARIA accessibility with GPU-smooth dragging and no other libraries required.

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
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

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.

Tech stack

TypeScriptJavaScriptCSS

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

In plain English

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.
Open on GitHub → Explain another repo

← leongersen on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.