A Lightweight Range Slider Javascript Plugin Library | noUiSlider

noUiSlider is a lightweight JavaScript range slider library with full multi-touch support. It fits nicely with responsive designs and has no dependencies and this plugin creates gorgeous, easy-to-touch scope sliders without having to include the full jQuery UI library.

Each slider can have two handles for setting a range, a fixed minimum or maximum can be set to set a threshold, or two handles can be used, to simply select some points.

JavaScript range slider with full touch support:

  • Multi-Touch support for iOS, Android & Windows (phone)
  • Accessible with ARIA and keyboard support
  • Responsive design-friendly
  • No dependencies
  • Tested in IE9 – IE11, Edge, Chrome, Firefox & Safari

How to make use of it:

1. Install & Download the library with package managers.

# Yarn
$ yarn add nouislider

$ npm install nouislider --save

2. Or download the zip and Include the noUiSlider.js and noUiSlider.css on the web page.

<link href="nouislider.css" rel="stylesheet">
<script src="nouislider.js"></script>

3. Create a container to hold the range slider.

<div class="noUiSlider"></div><br>

4. Initialize the plugin and generate a primary range slider:

var mySlider = document.getElementById('noUiSlider');

noUiSlider.create(slider, {
  // options here

5. All potential choices to customize the range slider.

noUiSlider.create(slider, {

  // Start values
  start: [20, 80],

  // Min/Max values
  range: {
    'min': [0],
    'max': [100]

  // Margin in pixels
  margin: 30,

  // Padding in pixels
  padding: [10, 15],

  // Limits the maximum distance between two handles
  limit: 40,

  // Step size
  step: 10,

  // Forces the slider to jump between the specified values
  snap: false,
  // Controls the bar between the handles or the edges of the slider.
  // Pass an array with a boolean for every connecting element, including the edges of the slider. The length of this array must match the handle count + 1.
  // Setting true sets the bars between the handles, but not between the handles and the sliders edges.
  connect: false,

  // "ltr", "rtl"
  direction: "ltr",

  // accepts a "-" separated list of "drag", "tap", "fixed", "snap", "unconstrained" or "none"
  // e.g. "drag-fixed", "unconstrained-tap", "hover"
  behaviour: "tap",

  // "vertical" or "horizontal"
  orientation: "horizontal",

  // Enables.
  // boolean, Formatter, array of boolean or Formatter for each handle
  tooltips: [false, wNumb({decimals: 1}), true],

  // Enable animation
  animate: false,
  animationDuration: 300,

  // Enables keyboard interactions
  keyboardSupport: true,

  // CSS prefix
  cssPrefix: "noUi-",

  // keyboard interactions
  keyboardPageMultiplier: 5,
  keyboardDefaultStep: 10

  // When moving the slider through documents, or in other advanced scenarios, the documentElement that events are bound to can be changed.
  documentElement: documentElement,

  // Format the slider output
  format: {
    // 'to' the formatted value. Receives a number.
    to: function (value) {
        return value + ',-';
    // 'from' the formatted value.
    // Receives a string, should return a number.
    from: function (value) {
        return Number(value.replace(',-', ''));

  // Used for the aria-valuenow accessibility attribute
  ariaFormat: wNumb({
    decimals: 3

  // Default classes
  cssClasses: {
    target: "target",
    base: "base",
    origin: "origin",
    handle: "handle",
    handleLower: "handle-lower",
    handleUpper: "handle-upper",
    touchArea: "touch-area",
    horizontal: "horizontal",
    vertical: "vertical",
    background: "background",
    connect: "connect",
    connects: "connects",
    ltr: "ltr",
    rtl: "rtl",
    textDirectionLtr: "txt-dir-ltr",
    textDirectionRtl: "txt-dir-rtl",
    draggable: "draggable",
    drag: "state-drag",
    tap: "state-tap",
    active: "active",
    tooltip: "tooltip",
    pips: "pips",
    pipsHorizontal: "pips-horizontal",
    pipsVertical: "pips-vertical",
    marker: "marker",
    markerHorizontal: "marker-horizontal",
    markerVertical: "marker-vertical",
    markerNormal: "marker-normal",
    markerLarge: "marker-large",
    markerSub: "marker-sub",
    value: "value",
    valueHorizontal: "value-horizontal",
    valueVertical: "value-vertical",
    valueNormal: "value-normal",
    valueLarge: "value-large",
    valueSub: "value-sub"

6. API strategies:

// destroy 

// get steps

// get slider value

// set slider value

// set handle
// number: zero-indexed handle number
// string: slider value
// boolean: fire an event
slider.noUiSlider.setHandle("number", "string", boolean);

// rest

// update options

// generate points along the slider

// remove pips

// remove tooltips

7. Event handlers:

// slider.noUiSlider.on(..., ...);
// slider.noUiSlider.off(...);

slider.noUiSlider.on('EVENTNAME.one', function (values, handle, unencoded, tap, positions, noUiSlider) {
  // in the 'one' namespace

Accessible Touch-friendly Range Slider Plugin nouislider example, range slider with fixed values, range slider with steps, noUiSlider Github

See Demo And Download

Official Website(leongersen): Click Here

This superior jQuery/javascript plugin is developed by leongersen. For extra Advanced usage, please go to the official website.

Related Posts


Bootstrap 4 Sidebar Menu Responsive Template | MDB

Bootstrap Side Navbar – Responsive sidebar template based on the Bootstrap 4 framework. An easy-to-use, totally responsive, Google Material Design impressed aspect navigation for modern web app…


Bootstrap 5 Treeview Dynamically Collapsible | bs5treeview

Bootstrap 5 Tree View is a very simple plug-in for creating a basic and elegant Treeview using BS5. For use with Bootstrap 5, the attributes have been…


Modern Mobile Touch Slider With Acceleration Transitions | Swiper

Swiper is the most modern free mobile touch slider with accelerated device transitions and amazing original behavior. It is intended for use in mobile websites, mobile web…


Confetti Falling Animation Effect In JavaScript | party.js

Party.js is a JavaScript library to brighten user site experience with visual effects! Celebrate success with dom confetti! The library is written in TypeScript and compiled into…


[Steps] A Simple, Lightweight jQuery Step Wizard Plugin

jQuery steps wizard is a simple and lightweight plugin. The step is a jQuery plugin that turns any grouped elements into a step-by-step wizard with navigation buttons…


Responsive Image Gallery Lightbox jQuery Plugin | VenoBox

VenoBox is a responsive jQuery modal window plugin suitable for images, embedded content, iFrames, Google Maps, Vimeo, and YouTube videos. The big difference compared to many other…

Leave a Reply

Your email address will not be published. Required fields are marked *