Slider Range

  
   
<div class="row">
<div class="col-md-6 mt-4">
<input class="w-100" type="range" id="defaultRange" name="points2">
    </div>
      <div class="col-md-6 mt-4">
            <input type="range" class="form-range" id="customRange1">
      </div>
     
       <div class="col-md-6 mt-4">
           <label for="disabledRange" class="form-label">Disabled range</label>
           <input type="range" class="form-range" id="disabledRange" disabled="">
                                     
        </div>
          <div class="col-md-6 mt-4">
     
        <label for="customRange3" class="form-label">Example range</label>
     <input type="range" class="form-range" min="0" max="5" step="0.5" id="customRange3">
     
     </div>
     
   </div>
    
              

  

   
      
     .root {
       padding: 3rem 1.5rem;
       border-radius: 5px;
       box-shadow: 0 2rem 6rem rgba(0, 0, 0, 0.3);
     }
     
     figure {
       display: flex;
     }
     figure img {
       width: 8rem;
       height: 8rem;
       border-radius: 50%;
       border: 1px solid #f05a00;
       margin-right: 1.5rem;
     }
     figure figcaption {
       display: flex;
       flex-direction: column;
       justify-content: space-evenly;
     }
     figure figcaption h4 {
       font-size: 1.4rem;
       font-weight: 500;
     }
     figure figcaption h6 {
       font-size: 1rem;
       font-weight: 300;
     }
     figure figcaption h2 {
       font-size: 1.6rem;
       font-weight: 500;
     }
     
     .order-track {
       padding: 0 1rem;
       display: flex;
       flex-direction: column;
     }
     .order-track-step {
       display: flex;
       height: 6rem;
     }
     .order-track-step:last-child {
       overflow: hidden;
       height: 4rem;
     }
     .order-track-step:last-child .order-track-status span:last-of-type {
       display: none;
     }
     .order-track-status {
       margin-right: 1.5rem;
       margin-left: 1.5rem;
       position: relative;
     }
     .order-track-status-dot {
         display: block;
         width: 2.2rem;
         height: 2.2rem;
         border-radius: 50%;
         background: #167DF5;
         color: white;
         justify-content: center;
         display: flex;
         padding: 5px;
     }
     .order-track-status-line {
       display: block;
       margin: 0 auto;
       width: 2px;
       height: 4rem;
       background: #167DF5;
     }
     .order-track-text-stat {
       font-size: 14px;
       margin-bottom: 3px;
       color: #5F5F5F;
       font-weight: 700;
     }
     .order-track-text-sub {
       font-size: 12px;
       font-weight: 300;
       color: #7A7A7A;
     }
     
     .ongoing {
       background: #9D9D9B;
     }