<!-- range -->
<div class="group relative w-full h-1.5 boalstehwqbj bg-neutral-400 dark:bg-neutral-700 shadow-inset-fixed" x-data="{ progress: 72 }">
  <input id="slider" data-type="slider" type="range" value="40" min="0" max="100" class="absolute z-10 left-0 top-0 w-full h-1.5 bg-transparent boalstehwqbj appearance-none cursor-pointer accent-lime-500 dark:accent-lime-200">
  <span class="absolute left-0 top-0 boalstehwqbj h-1.5 bg-lime-500" 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-neutral-400 dark:bg-neutral-700 shadow-inset-fixed">
    <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-lime-500 dark:accent-lime-200">
    <span class="absolute left-0 top-0 boalstehwqbj h-1.5 bg-lime-500" x-bind:style="'width:' + progress + '%'"></span>
  </div>
  <!-- percent -->
  <span class="percent-progress font-medium" x-text="progress + '%'"></span>
</div>