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. |