MarkupRefineLib

Menu


Range labels

Use mr-range-labels on the datalist used to visually align range labels with the input steps.

<input type="range" min="0" max="2" step="1" list="quality">
<datalist id="quality" class="mr-range-labels">
  <option value="0" label="Low"></option>
  <option value="1" label="Medium"></option>
  <option value="2" label="High"></option>
</datalist>