Datepicker

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.

Slider

Result
HTML

<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

Result
HTML

<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>

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 above and include it in your page. Afterwards, you can modify the slider’s values with the ones you need.