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 -->
<div x-data="{ rangePercent: 92 }" class="relative min-h-[56px] mb-3">
  <label for="default-range" class="flex qesolakmsjd pdskdmsdnjw opsiajksman mb-4 text-sm font-medium text-gray-900 dark:text-white">
    Media Volume
    <span x-text="`${rangePercent}%`"></span>
  </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" x-model="rangePercent" data-type="slider" class="absolute z-10 start-0 top-0 w-full h-1 bg-transparent rounded-lg appearance-none cursor-pointer">
    <span :style="{ width: rangePercent + '%' }" class="absolute start-0 top-0 rounded h-1 bg-primary-600 dark:bg-primary-200"></span>
  </div>
</div>