Tailwind CSS Range

Class Name	Type	Description
range	Component	Range input
range-primary	Color	Adds ‘primary’ to range
range-secondary	Color	Adds ‘secondary’ to range
range-accent	Color	Adds ‘accent’ to range
range-info	Color	Adds ‘info’ to range
range-success	Color	Adds ‘success’ to range
range-warning	Color	Adds ‘warning’ to range
range-error	Color	Adds ’error’ to range
range-xs	Size	Extra small range
range-sm	Size	Small range
range-md	Size	Medium (Default) range
range-lg	Size	Large range
range-xl	Size	Extra Large range

Basic example

Default

Basic input range example.

Size

Range sizes

The Range inputs are stacked in three sizes:extra small xs, small sm, default, and large lg.

<input type="range" class="range range-xs" aria-label="range" />
<input type="range" class="range range-sm" aria-label="range" />
<input type="range" class="range" aria-label="range" />
<input type="range" class="range range-lg" aria-label="range" />
<input type="range" class="range range-xl" aria-label="range" />

Color

Semantic colors

The standard format for range is accompanied by the component class range and modifier class range-{semantic-color}.

<input type="range" class="range" aria-label="range" />
<input type="range" class="range range-primary" aria-label="primary range" />
<input type="range" class="range range-secondary" aria-label="secondary range" />
<input type="range" class="range range-info" aria-label="info range" />
<input type="range" class="range range-success" aria-label="success range" />
<input type="range" class="range range-warning" aria-label="warning range" />
<input type="range" class="range range-error" aria-label="error range" />

Custom color

Utilize [--range-color:] to incorporate your custom color.

Illustrations

Disabled

Apply the disabled boolean attribute to a range input to disable pointer events and prevent focusing.

Min and max

Range inputs inherently have default values for min and max - 0 and 100, respectively. You can customize these values using the min and max attributes.

Steps

The step attribute specifies the interval between legal numbers in an <input> element.

<input type="range" min="0" max="100" value="25" class="range" step="25" aria-label="range" />

<div class="w-full flex justify-between text-xs px-2">
  <span>|</span>
  <span>|</span>
  <span>|</span>
  <span>|</span>
  <span>|</span>
</div>

FlyonUI