<div class="container my-4">

    <p>

      <strong>MDBootstrap multi-range slider is an interactive component that lets the user swiftly slide through possible values spread over the desired range. See the example.</strong>

    </p>

​

    <p>

      Detailed documentation and more examples you can find in our

      <a href="https://mdbootstrap.com/docs/standard/forms/multi-range-slider/"

        target="_blank"><strong>Bootstrap Multi Range Slider Docs</strong></a>

    </p>

​

    <hr />

​

    <p class="font-weight-bold">Basic example</p>

​

    <p>A multi-range-slider slider is gonna autoinit if you add class multi-range-slider to your element. Multi-range Slider starts with max 100 and min 0 values.</p>

    <div class="border p-5">

​

      <div class="d-flex justify-content-center">

        <!-- Copy this code to have a working example -->

​

          <div class="multi-range-slider"></div>

​

​

        <!--/ Copy this code to have a working example -->

      </div>

​

    </div>

  </div>

​

var myModal = new bootstrap.Modal(document.getElementById('myModal'), options)