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 nouislider example, range slider with fixed values, range slider with steps, noUiSlider Github

See Demo And Download