Range Sizes

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-8">
    <!-- Extra Small Range -->
    <div class="space-y-2">
      <label for="range-xs" class="block text-xs font-medium text-gray-700">Extra Small</label>
      <input 
        type="range" 
        id="range-xs" 
        min="0" 
        max="100" 
        value="30" 
        class="w-full h-1 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Small Range -->
    <div class="space-y-2">
      <label for="range-sm" class="block text-sm font-medium text-gray-700">Small</label>
      <input 
        type="range" 
        id="range-sm" 
        min="0" 
        max="100" 
        value="40" 
        class="w-full h-1.5 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Medium Range (Default) -->
    <div class="space-y-2">
      <label for="range-md" class="block text-base font-medium text-gray-700">Medium (Default)</label>
      <input 
        type="range" 
        id="range-md" 
        min="0" 
        max="100" 
        value="50" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Large Range -->
    <div class="space-y-2">
      <label for="range-lg" class="block text-lg font-medium text-gray-700">Large</label>
      <input 
        type="range" 
        id="range-lg" 
        min="0" 
        max="100" 
        value="60" 
        class="w-full h-3 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Extra Large Range -->
    <div class="space-y-2">
      <label for="range-xl" class="block text-xl font-medium text-gray-700">Extra Large</label>
      <input 
        type="range" 
        id="range-xl" 
        min="0" 
        max="100" 
        value="70" 
        class="w-full h-4 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
  </div>
</section>