Range

Use our custom range inputs for consistent cross-browser styling and built-in customization.

                
                  <div class="mb-6">
                    <label for="customRange1" class="inline-block">Example range</label>
                    <input type="range" class="w-full h-6 py-1 bg-transparent focus:outline-none focus:ring-0" id="customRange1">
                    <span class="block clear-both"></span>
                  </div>
                  <div class="mb-6">
                    <label for="customRange2" class="inline-block">Disabled range</label>
                    <input type="range" class="w-full h-6 py-1 bg-transparent focus:outline-none focus:ring-0 cursor-not-allowed" id="customRange2" disabled>
                    <span class="block clear-both"></span>
                  </div>