Input

Slider

Single-value range input with accessible bounds and direct keyboard/pointer control.

Canonical sourcepatterns/slider.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Adjust the output level.

View HTML

<label class="ef-slider">
  <span class="ef-slider__header">
    <span class="ef-slider__label">Volume</span>
  </span>
  <input class="ef-slider__input" type="range" name="ex1-slider-volume" min="0" max="100" step="5" value="25">
  <span class="ef-slider__bounds" aria-hidden="true">
    <span>0</span>
    <span>100</span>
  </span>
  <span class="ef-field__description">Adjust the output level.</span>
</label>

Example 2

Representative state

A browser-native state made visible without adding a runtime.

Adjust the output level.

View HTML

<label class="ef-slider">
  <span class="ef-slider__header">
    <span class="ef-slider__label">Volume</span>
  </span>
  <input class="ef-slider__input" type="range" name="ex2-slider-volume" min="0" max="100" step="5" value="75">
  <span class="ef-slider__bounds" aria-hidden="true">
    <span>0</span>
    <span>100</span>
  </span>
  <span class="ef-field__description">Adjust the output level.</span>
</label>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Adjust the output level.

View HTML

<label class="ef-slider">
  <span class="ef-slider__header">
    <span class="ef-slider__label">Volume</span>
  </span>
  <input class="ef-slider__input" type="range" name="ex3-slider-volume" min="0" max="100" step="5" value="25">
  <span class="ef-slider__bounds" aria-hidden="true">
    <span>0</span>
    <span>100</span>
  </span>
  <span class="ef-field__description">Adjust the output level.</span>
</label>