Range Disabled

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Enabled Range -->
    <div class="space-y-2">
      <label for="range-enabled" class="block text-sm font-medium text-gray-700">Enabled Range Slider</label>
      <input 
        type="range" 
        id="range-enabled" 
        min="0" 
        max="100" 
        value="60" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Disabled Range -->
    <div class="space-y-2">
      <label for="range-disabled" class="block text-sm font-medium text-gray-400">Disabled Range Slider</label>
      <input 
        type="range" 
        id="range-disabled" 
        min="0" 
        max="100" 
        value="40" 
        disabled
        class="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-not-allowed opacity-70 accent-gray-400"
      >
    </div>
    
    <!-- Disabled Range with Value Display -->
    <div class="space-y-2">
      <label for="range-disabled-value" class="block text-sm font-medium text-gray-400">
        Disabled Range with Value: <span class="text-gray-500">40%</span>
      </label>
      <input 
        type="range" 
        id="range-disabled-value" 
        min="0" 
        max="100" 
        value="40" 
        disabled
        class="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-not-allowed opacity-70 accent-gray-400"
      >
    </div>
    
    <!-- Disabled Fieldset with Range -->
    <fieldset disabled class="border border-gray-200 rounded-md p-4 opacity-75">
      <legend class="px-2 text-sm font-medium text-gray-500">Disabled Form Group</legend>
      
      <div class="space-y-4 mt-2">
        <div class="space-y-2">
          <label for="range-in-fieldset" class="block text-sm font-medium text-gray-500">Volume</label>
          <input 
            type="range" 
            id="range-in-fieldset" 
            min="0" 
            max="100" 
            value="75" 
            class="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-not-allowed accent-gray-400"
          >
        </div>
        
        <div class="space-y-2">
          <label for="range-in-fieldset-2" class="block text-sm font-medium text-gray-500">Brightness</label>
          <input 
            type="range" 
            id="range-in-fieldset-2" 
            min="0" 
            max="100" 
            value="50" 
            class="w-full h-2 bg-gray-100 rounded-lg appearance-none cursor-not-allowed accent-gray-400"
          >
        </div>
      </div>
    </fieldset>
  </div>
</section>