Range Double

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-8">
    <!-- Double Range Slider -->
    <div class="space-y-4">
      <label class="block text-sm font-medium text-gray-700">
        Price Range: <span id="min-value">$200</span> - <span id="max-value">$800</span>
      </label>
      
      <div class="relative h-8">
        <!-- Track Background -->
        <div class="absolute top-3 left-0 right-0 h-2 bg-gray-200 rounded-full"></div>
        
        <!-- Selected Range -->
        <div id="range-selected" class="absolute top-3 h-2 bg-blue-500 rounded-full" style="left: 20%; right: 20%"></div>
        
        <!-- Min Range Slider -->
        <input 
          type="range" 
          id="min-range" 
          min="0" 
          max="1000" 
          value="200" 
          step="10"
          class="absolute top-3 w-full h-2 appearance-none bg-transparent pointer-events-none z-10 accent-blue-600"
          oninput="updateDoubleRange()"
        >
        
        <!-- Max Range Slider -->
        <input 
          type="range" 
          id="max-range" 
          min="0" 
          max="1000" 
          value="800" 
          step="10"
          class="absolute top-3 w-full h-2 appearance-none bg-transparent pointer-events-none z-10 accent-blue-600"
          oninput="updateDoubleRange()"
        >
      </div>
      
      <!-- Min-Max Input Controls -->
      <div class="flex gap-4">
        <div class="flex-1">
          <label for="min-input" class="block text-xs font-medium text-gray-700 mb-1">Min</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-3 flex items-center text-gray-500">$</span>
            <input 
              type="number" 
              id="min-input" 
              min="0" 
              max="1000" 
              value="200" 
              class="w-full px-3 py-2 pl-7 border border-gray-300 rounded-md text-sm"
              oninput="updateInputValues()"
            >
          </div>
        </div>
        
        <div class="flex-1">
          <label for="max-input" class="block text-xs font-medium text-gray-700 mb-1">Max</label>
          <div class="relative">
            <span class="absolute inset-y-0 left-3 flex items-center text-gray-500">$</span>
            <input 
              type="number" 
              id="max-input" 
              min="0" 
              max="1000" 
              value="800" 
              class="w-full px-3 py-2 pl-7 border border-gray-300 rounded-md text-sm"
              oninput="updateInputValues()"
            >
          </div>
        </div>
      </div>
    </div>
    
    <!-- Price Category Ranges -->
    <div class="space-y-4">
      <label class="block text-sm font-medium text-gray-700">Price Categories</label>
      <div class="h-8 relative">
        <!-- Track Background -->
        <div class="absolute top-3 left-0 right-0 h-2 bg-gray-200 rounded-lg overflow-hidden">
          <div class="absolute left-0 w-1/4 h-full bg-green-500"></div>
          <div class="absolute left-1/4 w-1/4 h-full bg-blue-500"></div>
          <div class="absolute left-2/4 w-1/4 h-full bg-yellow-500"></div>
          <div class="absolute left-3/4 w-1/4 h-full bg-red-500"></div>
        </div>
        
        <!-- Category Markers -->
        <div class="absolute top-5 left-0 right-0 flex justify-between text-xs text-gray-600 mt-3">
          <span>Budget</span>
          <span>Regular</span>
          <span>Premium</span>
          <span>Luxury</span>
          <span></span>
        </div>
      </div>
    </div>
  </div>
  
  <script>
    // Update double range slider
    function updateDoubleRange() {
      const minRange = document.getElementById('min-range');
      const maxRange = document.getElementById('max-range');
      const rangeSelected = document.getElementById('range-selected');
      const minValue = document.getElementById('min-value');
      const maxValue = document.getElementById('max-value');
      const minInput = document.getElementById('min-input');
      const maxInput = document.getElementById('max-input');
      
      // Ensure min doesn't exceed max
      if (parseInt(minRange.value) > parseInt(maxRange.value)) {
        minRange.value = maxRange.value;
      }
      
      // Calculate percentages for visual display
      const minPercent = (minRange.value / minRange.max) * 100;
      const maxPercent = 100 - ((maxRange.value / maxRange.max) * 100);
      
      // Update the selected range visual
      rangeSelected.style.left = minPercent + '%';
      rangeSelected.style.right = maxPercent + '%';
      
      // Update displayed values
      minValue.textContent = '$' + minRange.value;
      maxValue.textContent = '$' + maxRange.value;
      
      // Update input fields
      minInput.value = minRange.value;
      maxInput.value = maxRange.value;
    }
    
    // Update from input fields
    function updateInputValues() {
      const minRange = document.getElementById('min-range');
      const maxRange = document.getElementById('max-range');
      const minInput = document.getElementById('min-input');
      const maxInput = document.getElementById('max-input');
      
      // Ensure min doesn't exceed max
      if (parseInt(minInput.value) > parseInt(maxInput.value)) {
        minInput.value = maxInput.value;
      }
      
      // Update sliders
      minRange.value = minInput.value;
      maxRange.value = maxInput.value;
      
      // Update visuals
      updateDoubleRange();
    }
    
    // Initialize pointer events after DOM is loaded
    document.addEventListener('DOMContentLoaded', function() {
      const minRange = document.getElementById('min-range');
      const maxRange = document.getElementById('max-range');
      
      // Enable pointer events for sliders
      minRange.classList.remove('pointer-events-none');
      maxRange.classList.remove('pointer-events-none');
    });
  </script>
</section>