Logo
hummingbird

Range

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

Class Name Type Description
form-range Component Range input
default Color Primary color (default)
form-range-secondary Color Secondary color
form-range-info Color Info color
form-range-success Color Success color
form-range-warning Color Warning color
form-range-danger Color Danger color
form-range-neutral Color Neutral color
form-range-sm Size Small range input
default Size Medium size (default)
form-range-lg Size Large range input
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" />
CSS variables

The range component is built using a set of CSS variables. These variables provide flexibility for customizing styles.

.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);
}