Input Range

500 m
<.phx_form_for for={%{}} as={:story} :let={f}>
  <.input_range_group form={f} id="input-range-single-default" label="Distance" max={1500} min={50} value={500} suffix="m" step={50} field={:distance}/>
</.phx_form_for>
500 km

In kilometers

<.phx_form_for for={%{}} as={:story} :let={f}>
  <.input_range_group form={f} id="input-range-single-with-hint" label="Distance" max={1000} min={100} value={500} suffix="km" step={100} field={:distance} hint="In kilometers"/>
</.phx_form_for>