Phenix Storybook

Pick a theme

Displays Riders

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>