Press "Enter" to skip to content

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
$ 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 
slider.noUiSlider.destroy();

// get steps
slider.noUiSlider.steps();

// get slider value
slider.noUiSlider.get();

// set slider value
slider.noUiSlider.set(value);

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

// rest
slider.noUiSlider.reset();

// update options
slider.noUiSlider.updateOptions(OPTIONA);

// generate points along the slider
slider.noUiSlider.pips(...);

// remove pips
slider.noUiSlider.removePips();

// remove tooltips
slider.noUiSlider.removeTooltips();

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, range slider, rangeslider js, range slider with scale, multi range slider, multiple range slider, 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 Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.