Design your space exactly how you want it !
<div class="border rounded-10 p-6 space-y-10">
<label class="block mb-[50px] font-medium text-gray-500 dark:text-white">Progressing</label>
<!-- First Slider -->
<div class="relative w-full max-w-full flex-center range-wrapper">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="size-full bg-primary-500 range-line"></div>
</div>
<div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler">
<div class="tooltip bg-primary-500 text-white">
<div><span class="range-number">0</span>%</div>
</div>
</div>
<input type="range" class="range-input" min="0" max="100" value="65" step="1">
</div>
<!-- Second Slider -->
<div class="relative w-full max-w-full flex-center range-wrapper">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="size-full bg-primary-500 range-line"></div>
</div>
<div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler"></div>
<input type="range" class="range-input" min="0" max="100" value="50" step="1">
</div>
<!-- Third Slider -->
<div class="relative w-full max-w-full flex-center range-wrapper">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="size-full bg-[#BABABA] range-line"></div>
</div>
<div class="size-[18px] bg-[#BABABA] border border-[#E2E2E2] rounded-full absolute range-handler"></div>
<input type="range" class="range-input" min="0" max="100" value="75" step="1">
</div>
</div>
<div class="border rounded-10 p-6 space-y-8">
<label class="block mb-[47px] font-medium text-gray-500 dark:text-dark-text">Progressing (%)</label>
<!-- First Slider -->
<div class="flex-center leading-none gap-x-3 range-wrapper">
<div class="relative w-full max-w-full flex-center">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="h-full bg-primary-500 range-line"></div>
</div>
<div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler">
<div class="tooltip bg-primary-500 text-white">
<div><span class="range-number">0</span>%</div>
</div>
</div>
<input type="range" class="range-input" min="0" max="100" value="73" step="1">
</div>
<div class="w-8 leading-none inline-flex justify-end text-gray-500 dark:text-dark-text"><span class="range-number">73</span>%</div>
</div>
<!-- Second Slider -->
<div class="flex-center gap-x-3 range-wrapper">
<div class="relative w-full max-w-full flex-center">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="h-full bg-primary-500 range-line"></div>
</div>
<div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler"></div>
<input type="range" class="range-input" min="0" max="100" value="90" step="1">
</div>
<div class="w-8 leading-none inline-flex justify-end text-gray-500 dark:text-dark-text"><span class="range-number">90</span>%</div>
</div>
<!-- Third Slider -->
<div class="flex-center gap-x-3 range-wrapper">
<div class="relative w-full max-w-full flex-center">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="h-full range-line"></div>
</div>
<div class="size-[18px] bg-white border border-[#E2E2E2] rounded-full absolute range-handler"></div>
<input type="range" class="range-input" min="0" max="100" value="50" step="1">
</div>
<div class="w-8 leading-none inline-flex justify-end text-gray-500 dark:text-dark-text"><span class="range-number">50</span>%</div>
</div>
</div>
<div class="border rounded-10 p-6 space-y-10">
<label class="block mb-[50px] font-medium text-gray-500 dark:text-white">Progressing</label>
<div class="flex-center gap-x-3">
<button class="text-[#979797] range-decrement"><i class="ri-subtract-line text-inherit"></i></button>
<div class="relative w-full max-w-full flex-center range-wrapper">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="size-full bg-primary-500 range-line"></div>
</div>
<div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler"></div>
<input type="range" class="range-input" min="0" max="100" value="70" step="1">
</div>
<button class="text-[#979797] range-increment"><i class="ri-add-line text-inherit"></i></button>
</div>
</div>
<div class="border rounded-10 p-6 space-y-10">
<label class="block mb-[50px] font-medium text-gray-500 dark:text-white">Progressing</label>
<div class="flex-center gap-x-3">
<span class="text-[#979797]"><i class="ri-contrast-2-line text-inherit"></i></span>
<div class="relative w-full max-w-full flex-center range-wrapper">
<div class="w-full h-2.5 bg-[#ECEBF0] rounded-full overflow-hidden">
<div class="size-full bg-primary-500 range-line"></div>
</div>
<div class="size-[18px] bg-white border border-primary-500 rounded-full absolute range-handler">
<div class="tooltip bg-primary-500 text-white">
<div><span class="range-number">70</span>%</div>
</div>
</div>
<input type="range" class="range-input" min="0" max="100" value="70" step="1">
</div>
<span class="text-[#979797]"><i class="ri-sun-line text-inherit"></i></span>
</div>
</div>
<!-- comming soon -->