Range

                  
<!-- range -->
<div class="group relative w-full h-1.5 boalstehwqbj bg-primary-950" x-data="{ progress: 72 }">
  <input id="slider" data-type="slider" type="range" x-model="progress" min="0" max="100" class="absolute z-10 start-0 top-0 w-full h-1.5 bg-transparent boalstehwqbj appearance-none cursor-pointer accent-primary-300">
  <span class="absolute start-0 top-0 boalstehwqbj h-1.5 bg-primary-300" x-bind:style="'width:' + progress + '%'"></span>
</div>

<!-- range with number -->
<div class="flex layhetgsjdcb gap-2" x-data="{ progress: 92 }">
  <!-- range -->
  <div class="group relative w-full h-1.5 boalstehwqbj bg-primary-950">
    <input id="slider1" data-type="slider" type="range" x-model="progress" min="0" max="100" class="absolute z-10 start-0 top-0 w-full h-1.5 bg-transparent boalstehwqbj appearance-none cursor-pointer accent-primary-300">
    <span class="absolute start-0 top-0 boalstehwqbj h-1.5 bg-primary-300" x-bind:style="'width:' + progress + '%'"></span>
  </div>
  <!-- percent -->
  <span class="percent-progress font-medium" x-text="progress + '%'"></span>
</div>