Range slider

Range sliders allow users to view and select a value (or range) along a track. They’re ideal for adjusting settings such as volume and brightness, or for applying image filters.

This component requires javascript to create right and left sliding transitions. You can also replace it with another function in the framework you are using.

                
<!-- input range slider -->
<div class="relative min-h-[56px] mb-3">
  <label for="default-range" class="block mb-4 text-sm font-medium text-gray-900 dark:text-white">Media Volume</label>
  <div class="group relative w-full h-1 bg-gray-100 dark:bg-gray-700">
    <input id="default-range" type="range" min="0" max="100" value="78" data-type="slider" class="absolute z-10 left-0 top-0 w-full h-1 bg-transparent rounded-lg appearance-none cursor-pointer">
    <span class="absolute left-0 top-0 rounded h-1 bg-primary-600 dark:bg-primary-200"></span>
  </div>
</div>