Range With Labels

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-8">
    <!-- Range with Min/Max Labels -->
    <div class="space-y-2">
      <label for="range-min-max" class="block text-sm font-medium text-gray-700">Volume Control</label>
      <div class="flex items-center space-x-2">
        <span class="text-xs text-gray-500">0%</span>
        <input 
          type="range" 
          id="range-min-max" 
          min="0" 
          max="100" 
          value="60" 
          class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
        >
        <span class="text-xs text-gray-500">100%</span>
      </div>
    </div>
    
    <!-- Range with Value Label -->
    <div class="space-y-2">
      <label for="range-value" class="block text-sm font-medium text-gray-700">Opacity: <span id="opacity-value">75%</span></label>
      <input 
        type="range" 
        id="range-value" 
        min="0" 
        max="100" 
        value="75" 
        oninput="document.getElementById('opacity-value').textContent = this.value + '%'"
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Range with Emoji Labels -->
    <div class="space-y-2">
      <label for="range-emoji" class="block text-sm font-medium text-gray-700">Satisfaction Level</label>
      <div class="flex items-center space-x-2">
        <span class="text-xl">😞</span>
        <input 
          type="range" 
          id="range-emoji" 
          min="0" 
          max="100" 
          value="80" 
          class="flex-1 h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
        >
        <span class="text-xl">😀</span>
      </div>
    </div>
    
    <!-- Range with Top Labels -->
    <div class="space-y-4">
      <label for="range-top-labels" class="block text-sm font-medium text-gray-700">Temperature Control</label>
      <div class="relative pt-5">
        <div class="flex justify-between text-xs text-gray-500 absolute w-full top-0">
          <span>Cold</span>
          <span>Cool</span>
          <span>Warm</span>
          <span>Hot</span>
        </div>
        <input 
          type="range" 
          id="range-top-labels" 
          min="0" 
          max="3" 
          step="1"
          value="2" 
          class="w-full h-2 bg-gradient-to-r from-blue-300 via-green-300 to-red-300 rounded-lg appearance-none cursor-pointer"
        >
      </div>
    </div>
    
    <!-- Range with Bottom Icons -->
    <div class="space-y-2">
      <label for="range-icon-labels" class="block text-sm font-medium text-gray-700">Sound Control</label>
      <input 
        type="range" 
        id="range-icon-labels" 
        min="0" 
        max="100" 
        value="50" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
      <div class="flex justify-between text-blue-600 mt-1">
        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
        </svg>
        <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24" stroke="currentColor">
          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15.536 8.464a5 5 0 010 7.072m2.828-9.9a9 9 0 010 12.728M5.586 15H4a1 1 0 01-1-1v-4a1 1 0 011-1h1.586l4.707-4.707C10.923 3.663 12 4.109 12 5v14c0 .891-1.077 1.337-1.707.707L5.586 15z" />
        </svg>
      </div>
    </div>
  </div>
</section>