Tailwind CSS Range

A range slider is employed to adjust a value by sliding a handle.

Class Name	Type	Description
range	Component	Range input
range-primary	Modifier	Adds ‘primary’ to range
range-secondary	Modifier	Adds ‘secondary’ to range
range-info	Modifier	Adds ‘info’ to range
range-success	Modifier	Adds ‘success’ to range
range-warning	Modifier	Adds ‘warning’ to range
range-error	Modifier	Adds ’error’ to range
range-sm	Responsive	Small range
range-lg	Responsive	Large range

Basic example

Default

Basic input range example.

Size

Range sizes

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

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" />
<input type="range" class="range range-primary" />
<input type="range" class="range range-secondary" />
<input type="range" class="range range-info" />
<input type="range" class="range range-success" />
<input type="range" class="range range-warning" />
<input type="range" class="range range-error" />

Custom color

Utilize [--range-shdw:] 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" />

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

Radio

Select

FlyonUI