Tailwind CSS Range Slider
The Slider component, a type of range input, offers a consistent and customizable way for users to select values within a defined range. This intuitive component is ideal for adjusting settings such as volume, brightness, or for applying filters in various applications.
Heads up!
By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it! For tooltips, pips, multi-handle ranges, and JavaScript methods, use the Tailwind CSS range slider plugin.
Default range slider
Use a native <input type="range"> with custom track and thumb styling for a more consistent slider appearance across browsers.
Disabled range slider
Add the disabled attribute to make the range slider non-interactive and remove it from keyboard focus.
Custom min and max
Override the default min and max values of 0 and 100 to constrain the slider to a custom range.
Step intervals
Use the step attribute to control the interval between allowed values, such as moving in increments of 10.