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

## 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/libs/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

Show code

    <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

Show code

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