Range

<div class="ecl-form-group" data-ecl-range="true" data-ecl-auto-init="Range"><label for="example-range-id"
    id="example-range-id-label" class="ecl-form-label">Range slider<span class="ecl-form-label__optional" role="note"
      aria-label="optional">(optional)</span></label>
  <div class="ecl-help-block" id="example-range-id-helper">This is the input's helper text.</div><input
    data-ecl-range-input type="range" class="ecl-range ecl-range--m" id="example-range-id" aria-label="example-range-id"
    max="30" value="15" aria-describedby="example-range-id-helper" />
  <div class="ecl-range__value">Value: <span class="ecl-range__value-current" data-ecl-range-value-current></span></div>
</div>