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">(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-describedby="example-range-id-value" max="30" value="15" aria-describedby="example-range-id-helper" />
  <div class="ecl-range__bubble" data-ecl-range-bubble><span class="ecl-range__value-bubble"
      data-ecl-range-value-current></span></div>
  <div class="ecl-range__value" id="example-range-id-value">Value: <span class="ecl-range__value-current"
      data-ecl-range-value-current></span></div>
</div>