Phenix Storybook

Input Range

Default Open in playground
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>
With hint Open in playground
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>