Range

Range inputs let users select a value from a continuous range, typically with a slider control.

Default

HTML

<input type="range" class="form-range" />
<input type="range" class="form-range" disabled />

Min and max

HTML

<input type="range" class="form-range" min="0" max="10" />

Steps

HTML

<input type="range" class="form-range" min="0" max="10" step="0.5" />

Range with label

0ºC 25ºC 50ºC 75ºC 100ºC

HTML

<label class="form-label"id="rangeWithLabel">Temperature</label>
<input type="range" class="form-range" min="0" max="100"id="rangeWithLabel" />
<div class='flex items-center justify-between'>
  <span>0ºC</span>
  <span>25ºC</span>
  <span>50ºC</span>
  <span>75ºC</span>
  <span>100ºC</span>
</div>

Sizes

Use .form-range-sm for a small slider and .form-range-lg for a large slider. The default size is medium.

HTML

<input type="range" class="form-range form-range-sm" min="0" max="100" />
<input type="range" class="form-range" min="0" max="100" />
<input type="range" class="form-range form-range-lg" min="0" max="100" />

Colors variants

HTML

<input type="range" class="form-range" min="0" max="100" />
<input type="range" class="form-range form-range-secondary" min="0" max="100" />
<input type="range" class="form-range form-range-info" min="0" max="100" />
<input type="range" class="form-range form-range-success" min="0" max="100" />
<input type="range" class="form-range form-range-warning" min="0" max="100" />
<input type="range" class="form-range form-range-danger" min="0" max="100" />
<input type="range" class="form-range form-range-neutral" min="0" max="100" />

Class Overview

A list of all available utility classes for the range component.

Class NameTypeDescription
form-rangeComponentRange input
defaultColorPrimary color (default)
form-range-secondaryColorSecondary color
form-range-infoColorInfo color
form-range-successColorSuccess color
form-range-warningColorWarning color
form-range-dangerColorDanger color
form-range-neutralColorNeutral color
form-range-smSizeSmall range input
defaultSizeMedium size (default)
form-range-lgSizeLarge range input

CSS variables

The range component is built using a set of CSS variables. These variables provide flexibility for customizing styles. See the Theming to customize styles globally and apply overrides as needed.

.form-range {
  --form-range-color: var(--color-primary);
  --form-range-height: --spacing(6);
  --form-range-thumb-width: --spacing(5);
  --form-range-thumb-height: --spacing(5);
  --form-range-thumb-border-radius: calc(infinity * 1px);
  --form-range-thumb-box-shadow: --alpha(var(--form-range-color) / 16%) 0px 0px 0px 8px;
  --form-range-track-width: 100%;
  --form-range-track-height: --spacing(1.5);
  --form-range-track-border-radius: var(--radius-sm);
}
Previous

Switch
Next

Input Group