Range Slider
Range Slider.
Make use of Tailwind's unique range slider styles to create visually appealing, user-friendly sliders for selecting numeric values or ranges. It also enhance user input with smooth, interactive sliders that provide precise control.
Range SliderRange Slider
Default Range Slider
<input type="range" class="appearance-none w-full h-2 rounded-md bg-light!" id="myRange">
Disabled Range Slider
<input type="range" class="appearance-none w-full h-2 rounded-md bg-light! pointer-events-none disabled" id="disabledRange">
Min and Max Range Slider
<input type="range" class="appearance-none w-full h-2 rounded-md bg-light!" min="0" max="5" id="customRange2">
Steps Range Slider
<input type="range" class="appearance-none w-full h-2 rounded-md bg-light!" min="0" max="5" step="0.5" id="customRange3">