<!-- range -->
<div class="group relative w-full h-1.5 boalstehwqbj bg-white/70 dark:bg-neutral-400/40" 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-purple-500 dark:accent-purple-300">
<span class="absolute start-0 top-0 boalstehwqbj h-1.5 bg-purple-500 dark:bg-purple-400" 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-white/70 dark:bg-neutral-400/40">
<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-purple-500 dark:accent-purple-300">
<span class="absolute start-0 top-0 boalstehwqbj h-1.5 bg-purple-500 dark:bg-purple-400" x-bind:style="'width:' + progress + '%'"></span>
</div>
<!-- percent -->
<span class="percent-progress font-medium" x-text="progress + '%'"></span>
</div>
