Surface.Components.Form.RangeInput (surface v0.2.1) View Source
An input field that let the user specify a numeric value in a given range, usually using a slider.
Provides a wrapper for Phoenix.HTML.Form's range_input/3
function.
All options passed via opts
will be sent to range_input/3
, value
, min
, max
and class
can be set directly and will override anything in opts
.
Examples
<RangeInput form="volume" field="percent" min="0" max="100" step="5" value="40" opts={{ autofocus: "autofocus" }} />
Properties
- form :form - An identifier for the form.
- field :atom - An identifier for the input.
- id :string - The id of the corresponding input field.
- name :string - The name of the corresponding input field.
- value :string - Value to pre-populated the input.
- class :css_class - Class or classes to apply to the input.
- opts :keyword, default: [] - Options list.
- blur :event - Triggered when the component loses focus.
- focus :event - Triggered when the component receives focus.
- capture_click :event - Triggered when the component receives click.
- keydown :event - Triggered when a button on the keyboard is pressed.
- keyup :event - Triggered when a button on the keyboard is released.
- min :string - Minimum value for the input.
- max :string - Maximum value for the input.
- step :string - Sets or returns the value of the step attribute of the slider control.
Link to this section Summary
Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Callback implementation for Phoenix.LiveComponent.update/2
.
Link to this section Functions
Callback implementation for Phoenix.LiveComponent.mount/1
.
Callback implementation for Phoenix.LiveComponent.render/1
.
Callback implementation for Phoenix.LiveComponent.update/2
.