Edit these docs

Slider / range

eCommerce slider / range

Slider / range components dedicated to building eCommerce projects.

Regular slider 



        <form class="range-field">
          <input type="range" min="0" max="100" />
        </form>

Multi-range slider

$0
$100 


        <div class="slider-price d-flex align-items-center my-4">
          <span class="font-weight-normal small text-muted mr-2">$0</span>
          <form class="multi-range-field w-100 mb-1">
            <input id="multi" class="multi-range" type="range" />
          </form>
          <span class="font-weight-normal small text-muted ml-2">$100</span>
        </div>

      


          $('#multi').mdbRange({
            single: {
              active: true,
              multi: {
                active: true,
                rangeLength: 1
              },
            }
          });