Range

Range slider for selecting a value within a range.

Ranges are width: 100% by default. Do not add af-w-full.

Every range must have an associated <label> — for matching the input id, or wrap the control. Use the Field pattern for the usual label + control + help/error structure.

Thumb size uses --af-range-thumb-size (default 1.25rem). Track height uses --af-range-track-height (default 0.625rem) — see Tokens.

Markup

Volume

<div class="af-field">
  <label class="af-field__label" for="range-volume">Volume</label>
  <input
  type="range"
  id="range-volume"
  class="af-range"
  min="0"
  max="100"
  value="50"
/>
</div>

States

Brightness

Disabled

<div class="af-field">
  <label class="af-field__label" for="range-brightness">Brightness</label>
  <input
  type="range"
  id="range-brightness"
  class="af-range"
  min="0"
  max="100"
  value="75"
/>
</div>
<div class="af-field">
  <label class="af-field__label" for="range-disabled">Disabled</label>
  <input
  type="range"
  id="range-disabled"
  class="af-range"
  min="0"
  max="100"
  value="40"
  disabled
/>
</div>

Classless range

Ranges also work without classes inside form.af-form:

<form class="af-form">
  <label for="range-classless">Volume</label>
  <input
  type="range"
  id="range-classless"
  min="0"
  max="100"
  value="50"
/>
</form>

Component tokens

:root {
  --af-range-track-height: 0.625rem;
  --af-range-thumb-size: 1.25rem;
}