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>