noUiSlider multi range slider example

A noUiSlider multi-range HTML slider complete with the slider values outputted into the HTML.

noUiSlider is a minimal Javascript range slider framework with a convenient API.

CodePen example.

You will need the noUiSlider Javascript and CSS files which can be found on cdnjs here.

For this multi-range slider the min value will be 0 whilst the max is 100, the step size is 1.

Running an event on when the slider is interacted with uses the event callbacks. The ‘update’ event fits nicely. This event callback is needed to update the text below the slider with the current values.

Getting the values of the slider is done with slider.noUiSlider.get() which returns an array with the value of each slider toggle.

let slider = document.getElementById("slider");

noUiSlider.create(slider, {
  start: [20, 80],
  connect: true,
  step: 1,
  range: {
    min: 0,
    max: 100
  }
});

let min_element = document.getElementById("min");
let max_element = document.getElementById("max");
let dif_element = document.getElementById("dif");

slider.noUiSlider.on("update", function (values, handle) {
  let slider_values = slider.noUiSlider.get();
  min_element.innerHTML = parseInt(slider_values[0]);
  max_element.innerHTML = parseInt(slider_values[1]);
  dif_element.innerHTML = parseInt(slider_values[1] - slider_values[0]);
});

Here is the HTML which is utilizing the Bootstrap framework:

<div class="container">
  <div class="card">
    <div class="card-header text-center">
      <h1>noUiSlider</h1>
    </div>
    <div class="card-body">
      <div class="row text-center m-2">
        <div id="slider"></div>
      </div>
      <div class="row text-center mt-2">
        <div class="col-4">
          <p>Min: <b><span id="min"></span></b></p>
        </div>
        <div class="col-4">
          <p>Dif: <b><span id="dif"></span></b></p>
        </div>
        <div class="col-4">
          <p>Max: <b><span id="max"></span></b></p>
        </div>
      </div>
    </div>
  </div>
</div>

The slider CSS styling:

.noUi-connect {
  background: #a690f4;
}

.noUi-target {
  background: transparent;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.noUi-connects {
  background: #fab8c4;
}