Application Range Inputs Base with output

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

      <div class="mt-3 flex items-center gap-3">
        <input
          type="range"
          name="maxVolume"
          id="maxVolume"
          min="0"
          max="100"
          value="20"
          class="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"
        />

        <span class="text-sm/none font-medium text-gray-700">20%</span>
      </div>
    </label>