Input

Range entry

Direct lower/upper endpoint entry; graphical dual-thumb behavior is an optional application enhancement.

Canonical sourcepatterns/range-entry.html

Behavior ownerNative HTML

Runtime inside FormaNone

Example 1

Canonical

Canonical repository markup, namespaced only to keep examples independent.

Acceptable response-time range

Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.

Minimum Maximum

500 to 1500 milliseconds

View HTML

<fieldset class="ef-range-entry">
  <legend class="ef-range-entry__legend">Acceptable response-time range</legend>
  <p class="ef-field__description">Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.</p>

  <div class="ef-range-entry__inputs">
    <label>
      <span>Minimum</span>
      <input type="number" name="ex1-range-entry-response-time-min" min="0" max="5000" step="50" value="500" inputmode="decimal">
    </label>
    <span class="ef-range-entry__separator" aria-hidden="true">to</span>
    <label>
      <span>Maximum</span>
      <input type="number" name="ex1-range-entry-response-time-max" min="0" max="5000" step="50" value="1500" inputmode="decimal">
    </label>
  </div>

  <p class="ef-range-entry__status" data-ef-state="valid" aria-live="polite">500 to 1500 milliseconds</p>
</fieldset>

Example 2

Secondary surface

The same contract demonstrated on a secondary Forma surface.

Acceptable response-time range

Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.

Minimum Maximum

500 to 1500 milliseconds

View HTML

<fieldset class="ef-range-entry">
  <legend class="ef-range-entry__legend">Acceptable response-time range</legend>
  <p class="ef-field__description">Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.</p>

  <div class="ef-range-entry__inputs">
    <label>
      <span>Minimum</span>
      <input type="number" name="ex2-range-entry-response-time-min" min="0" max="5000" step="50" value="500" inputmode="decimal">
    </label>
    <span class="ef-range-entry__separator" aria-hidden="true">to</span>
    <label>
      <span>Maximum</span>
      <input type="number" name="ex2-range-entry-response-time-max" min="0" max="5000" step="50" value="1500" inputmode="decimal">
    </label>
  </div>

  <p class="ef-range-entry__status" data-ef-state="valid" aria-live="polite">500 to 1500 milliseconds</p>
</fieldset>

Example 3

Constrained layout

The canonical contract inside a narrow application region.

Acceptable response-time range

Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.

Minimum Maximum

500 to 1500 milliseconds

View HTML

<fieldset class="ef-range-entry">
  <legend class="ef-range-entry__legend">Acceptable response-time range</legend>
  <p class="ef-field__description">Enter both endpoints. A graphical range slider may be added by Limen as an enhancement, but direct entry remains available.</p>

  <div class="ef-range-entry__inputs">
    <label>
      <span>Minimum</span>
      <input type="number" name="ex3-range-entry-response-time-min" min="0" max="5000" step="50" value="500" inputmode="decimal">
    </label>
    <span class="ef-range-entry__separator" aria-hidden="true">to</span>
    <label>
      <span>Maximum</span>
      <input type="number" name="ex3-range-entry-response-time-max" min="0" max="5000" step="50" value="1500" inputmode="decimal">
    </label>
  </div>

  <p class="ef-range-entry__status" data-ef-state="valid" aria-live="polite">500 to 1500 milliseconds</p>
</fieldset>