Forms

Tailwind CSS Range

Tailwind CSS Range component is a custom input element that allows users to select a value from a defined range.

Default

A basic example of Tailwind CSS Range component.

Min & Max

Use the min and max attributes to set the minimum and maximum values for the Tailwind CSS Range.

Steps

Use the step attribute to define the increment value for the Tailwind CSS Range component.

Disabled

Use the disabled attribute of the Tailwind CSS Range to indicate non-interactivity, showing users that the checkbox cannot be dragged.

Source Code

The following source file manages the CSS styles of the Tailwind CSS Range component. Upon building the assets using Webpack Build Tools , the below file is compiled and added into the dist/assets/css/styles.css bundle, making it available globally across all pages.
File Description
src/core/plugins/components/range.js The Tailwind CSS compatible plugin written in PostCSS for applying CSS styles to the Tailwind CSS Range component.