Surface.Components.Form.RangeInput (surface v0.4.0) 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 :any - 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.
  • 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.

Events

  • capture_click - Triggered when the component captures click.
  • click - Triggered when the component receives click.
  • window_focus - Triggered when the page receives focus.
  • window_blur - Triggered when the page loses focus.
  • focus - Triggered when the component receives focus.
  • blur - Triggered when the component loses focus.
  • window_keyup - Triggered when a key on the keyboard is released (window-level).
  • window_keydown - Triggered when a key on the keyboard is pressed (window-level).
  • keyup - Triggered when a key on the keyboard is released.
  • keydown - Triggered when a key on the keyboard is pressed.

Link to this section Summary

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.