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.

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

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

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

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