Range With Steps

                    <section class="p-6 bg-white rounded-lg shadow-sm">
  <div class="max-w-md mx-auto space-y-6">
    <!-- Range with Steps -->
    <div class="space-y-2">
      <label for="range-steps" class="block text-sm font-medium text-gray-700">Range with Steps</label>
      <input 
        type="range" 
        id="range-steps" 
        min="0" 
        max="100" 
        value="25" 
        step="25" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
      <div class="flex justify-between px-1 mt-2">
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
      </div>
      <div class="flex justify-between text-xs text-gray-600">
        <span>0%</span>
        <span>25%</span>
        <span>50%</span>
        <span>75%</span>
        <span>100%</span>
      </div>
    </div>
    
    <!-- Range with Custom Steps -->
    <div class="space-y-2 mt-8">
      <label for="range-custom-steps" class="block text-sm font-medium text-gray-700">Price Range</label>
      <input 
        type="range" 
        id="range-custom-steps" 
        min="0" 
        max="1000" 
        value="250" 
        step="250" 
        class="w-full h-2 bg-gray-200 rounded-lg appearance-none cursor-pointer accent-blue-600"
      >
      <div class="flex justify-between px-1 mt-2">
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
        <span class="text-xs text-gray-600">|</span>
      </div>
      <div class="flex justify-between text-xs text-gray-600">
        <span>$0</span>
        <span>$250</span>
        <span>$500</span>
        <span>$750</span>
        <span>$1000</span>
      </div>
    </div>
  </div>
</section>