Sliders

Our customized noUiSlider is a lightweight JavaScript range slider library. It offers a wide selection of options and settings, and is compatible with a ton of (touch) devices, including those running iOS, Android, Windows 8/8.1/10, Windows Phone 8.1 and Windows Mobile 10.

Usage

In order to use this plugin on your page you will need to include the following script in the “Optional JS” area from the page’s footer:

<script src="/assets/vendor/nouislider/distribute/nouislider.min.js"></script>

Initialization

Simply copy one of the code examples demonstrated below and include it in your page. Afterwards, you can modify the slider’s values with the ones you need.

Slider

<div class="input-slider-container">
  <div id="input-slider" class="input-slider" data-range-value-min="100" data-range-value-max="500"></div>
  <div class="row mt-3 d-none">
    <div class="col-6">
      <span id="input-slider-value" class="range-slider-value" data-range-value-low="100"></span>
    </div>
  </div>
</div>

Range slider

<div>
  <div id="input-slider-range" data-range-value-min="100" data-range-value-max="500"></div>
  <div class="row d-none">
      <div class="col-6">
          <span class="range-slider-value value-low" data-range-value-low="200" id="input-slider-range-value-low"></span>
      </div>
      <div class="col-6 text-right">
          <span class="range-slider-value value-high" data-range-value-high="400" id="input-slider-range-value-high"></span>
      </div>
  </div>
</div>