<!-- range -->
<div class="group relative w-full h-1.5 rounded-full 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 rounded-full appearance-none cursor-pointer accent-primary-300">
<span class="absolute start-0 top-0 rounded-full h-1.5 bg-primary-300" x-bind:style="'width:' + progress + '%'"></span>
</div>
<!-- range with number -->
<div class="flex olwuyhsbcnmdj thsjkalsueijm" x-data="{ progress: 92 }">
<!-- range -->
<div class="group relative w-full h-1.5 rounded-full 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 rounded-full appearance-none cursor-pointer accent-primary-300">
<span class="absolute start-0 top-0 rounded-full 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>