Basic example
<div class="relative pt-1">
<label for="customRange1" class="form-label">Example range</label>
<input
type="range"
class="
form-range
appearance-none
w-full
h-6
p-0
bg-transparent
focus:outline-none focus:ring-0 focus:shadow-none
"
id="customRange1"
/>
</div>
Disabled
<div class="relative pt-1">
<label for="disabledRange" class="form-label">Disabled range</label>
<input
type="range"
class="
form-range form-range
appearance-none
w-full
h-6
p-0
bg-transparent
focus:outline-none focus:ring-0 focus:shadow-none
"
id="disabledRange"
disabled
/>
</div>
Min and max
<div class="relative pt-1">
<label for="customRange2" class="form-label">Example range</label>
<input
type="range"
class="
form-range
appearance-none
w-full
h-6
p-0
bg-transparent
focus:outline-none focus:ring-0 focus:shadow-none
"
min="0"
max="5"
id="customRange2"
/>
</div>
Steps
<div class="relative pt-1">
<label for="customRange3" class="form-label">Example range</label>
<input
type="range"
class="
form-range
appearance-none
w-full
h-6
p-0
bg-transparent
focus:outline-none focus:ring-0 focus:shadow-none
"
min="0"
max="5"
step="0.5"
id="customRange3"
/>
</div>