Application Range Inputs Base with min and max labels

<label for="maxVolume">
      <span class="block text-sm font-medium text-gray-900">Max Volume</span>

      <input
        type="range"
        name="maxVolume"
        id="maxVolume"
        min="0"
        max="100"
        value="20"
        class="mt-3 h-3.5 w-full appearance-none rounded-full bg-gray-300 [&::-webkit-slider-thumb]:size-7 [&::-webkit-slider-thumb]:cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-[6px] [&::-webkit-slider-thumb]:border-gray-500 [&::-webkit-slider-thumb]:bg-gray-200"
      />

      <div class="mt-1 flex items-center justify-between">
        <span class="text-xs font-medium text-gray-700">0%</span>
        <span class="text-xs font-medium text-gray-700">100%</span>
      </div>
    </label>