Range Colors

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Default (Gray) Range -->
    <div class="space-y-2">
      <label for="range-default" class="block text-sm font-medium text-gray-700">Default</label>
      <input 
        type="range" 
        id="range-default" 
        min="0" 
        max="100" 
        value="40" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-gray-500"
      >
    </div>
    
    <!-- Primary (Blue) Range -->
    <div class="space-y-2">
      <label for="range-primary" class="block text-sm font-medium text-blue-700">Primary</label>
      <input 
        type="range" 
        id="range-primary" 
        min="0" 
        max="100" 
        value="50" 
        class="w-full h-2 bg-blue-100 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Success (Green) Range -->
    <div class="space-y-2">
      <label for="range-success" class="block text-sm font-medium text-green-700">Success</label>
      <input 
        type="range" 
        id="range-success" 
        min="0" 
        max="100" 
        value="60" 
        class="w-full h-2 bg-green-100 rounded-lg appearance-none cursor-pointer accent-green-600"
      >
    </div>
    
    <!-- Warning (Yellow) Range -->
    <div class="space-y-2">
      <label for="range-warning" class="block text-sm font-medium text-yellow-700">Warning</label>
      <input 
        type="range" 
        id="range-warning" 
        min="0" 
        max="100" 
        value="70" 
        class="w-full h-2 bg-yellow-100 rounded-lg appearance-none cursor-pointer accent-yellow-600"
      >
    </div>
    
    <!-- Danger (Red) Range -->
    <div class="space-y-2">
      <label for="range-danger" class="block text-sm font-medium text-red-700">Danger</label>
      <input 
        type="range" 
        id="range-danger" 
        min="0" 
        max="100" 
        value="80" 
        class="w-full h-2 bg-red-100 rounded-lg appearance-none cursor-pointer accent-red-600"
      >
    </div>
    
    <!-- Info (Indigo) Range -->
    <div class="space-y-2">
      <label for="range-info" class="block text-sm font-medium text-indigo-700">Info</label>
      <input 
        type="range" 
        id="range-info" 
        min="0" 
        max="100" 
        value="90" 
        class="w-full h-2 bg-indigo-100 rounded-lg appearance-none cursor-pointer accent-indigo-600"
      >
    </div>
  </div>
</section>