Range Custom

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-8">
    <!-- Custom Color Range -->
    <div class="space-y-2">
      <label for="range-custom-color" class="block text-sm font-medium text-purple-700">Custom Purple Range</label>
      <input 
        type="range" 
        id="range-custom-color" 
        min="0" 
        max="100" 
        value="40" 
        class="w-full h-2 bg-purple-100 rounded-lg appearance-none cursor-pointer accent-purple-600"
      >
    </div>
    
    <!-- Range with Custom Background -->
    <div class="p-4 bg-gradient-to-r from-cyan-50 to-blue-50 rounded-lg space-y-2">
      <label for="range-custom-bg" class="block text-sm font-medium text-blue-700">Range with Gradient Background</label>
      <input 
        type="range" 
        id="range-custom-bg" 
        min="0" 
        max="100" 
        value="60" 
        class="w-full h-2 bg-white/50 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
    </div>
    
    <!-- Range with Custom Track -->
    <div class="space-y-2">
      <label for="range-custom-track" class="block text-sm font-medium text-gray-700">Range with Gradient Track</label>
      <div class="relative">
        <div class="absolute inset-y-0 w-full h-2 bg-gradient-to-r from-yellow-300 to-red-500 rounded-lg"></div>
        <input 
          type="range" 
          id="range-custom-track" 
          min="0" 
          max="100" 
          value="50" 
          class="relative w-full h-2 bg-transparent appearance-none cursor-pointer z-10"
        >
      </div>
    </div>
    
    <!-- Range with Styled Thumb -->
    <div class="space-y-2">
      <label for="range-custom-thumb" class="block text-sm font-medium text-gray-700">Range with Custom Thumb</label>
      <input 
        type="range" 
        id="range-custom-thumb" 
        min="0" 
        max="100" 
        value="75" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:w-6 [&::-webkit-slider-thumb]:h-6 [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:bg-indigo-600 [&::-webkit-slider-thumb]:border-4 [&::-webkit-slider-thumb]:border-white [&::-webkit-slider-thumb]:shadow-md"
      >
    </div>
    
    <!-- No Fill Range -->
    <div class="space-y-2">
      <label for="range-no-fill" class="block text-sm font-medium text-gray-700">Range without Fill</label>
      <input 
        type="range" 
        id="range-no-fill" 
        min="0" 
        max="100" 
        value="40" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
      <p class="mt-1 text-xs text-gray-500">Shows only the track and thumb, no fill on the left side</p>
    </div>
  </div>
</section>