Range slider with labels

Bootstrap 5 Range slider with labels component

Responsive Range slider with labels built with Bootstrap 5. An example of a bootstrap range slider with labels. Easy to implement and customize.

Basic example

If you want to change the size of your range slider, just use the w-* class.

Edit in sandbox 
        
            
      <label class="form-label" for="customRange1">Range with class w-25</label>
<div data-mdb-range-init class="range w-25">
  <input type="range" class="form-range" id="customRange1" />
</div>

<label class="form-label" for="customRange2">Range with class w-50</label>
<div data-mdb-range-init class="range w-50">
  <input type="range" class="form-range" id="customRange2" />
</div>

<label class="form-label" for="customRange3">Range with class w-75</label>
<div data-mdb-range-init class="range w75">
  <input type="range" class="form-range" id="customRange3" />
</div>

<label class="form-label" for="customRange4">Basic range</label>
<div data-mdb-range-init class="range">
  <input type="range" class="form-range" id="customRange4" />
</div>