Certainly! I'll write the documentation for the range functionality in the range.md file. Here's the content you can add to the range.md file:

Range Input Customization

The range input customization feature allows you to style the different parts of an HTML range input (slider) using Tailwind CSS classes. This functionality is provided by a custom plugin that adds two new variants: range-thumb and range-track.

Usage

To use these custom variants, you can apply Tailwind CSS classes to your range input elements as follows:

<input type="range" class="
  range-thumb:bg-blue-500 
  range-thumb:w-6 
  range-thumb:h-6 
  range-track:bg-gray-200 
  range-track:h-2
">

Available Variants

range-thumb

The range-thumb variant targets the slider thumb (the draggable part of the range input). Use this variant to customize the appearance of the thumb.

Example:

<input type="range" class="range-thumb:bg-blue-500 range-thumb:w-6 range-thumb:h-6">

range-track

The range-track variant targets the track of the range input (the line along which the thumb moves). Use this variant to customize the appearance of the track.

Example:

<input type="range" class="range-track:bg-gray-200 range-track:h-2">

Browser Compatibility

Currently, this plugin only supports WebKit-based browsers (Safari, Chrome, Edge, etc.) as it uses the ::-webkit-slider-thumb and ::-webkit-slider-runnable-track pseudo-elements. For full cross-browser support, additional pseudo-elements would need to be added to the plugin.

Implementation Details The range customization is implemented as a Tailwind CSS plugin. The plugin adds two new variants using the addVariant function:

range-thumb: Targets the ::-webkit-slider-thumb pseudo-element.

range-track: Targets the ::-webkit-slider-runnable-track pseudo-element.

These variants modify the selectors to apply the specified classes to the respective parts of the range input.

For more information on how to use or modify this plugin, refer to the plugin-range.js file in the project's configuration directory.