Range Field(ui_range_field)

UiBibz::Ui::Core::Forms::Numbers::RangeField

Usage

This component is an extension of component element. A Ui Bibz component consists of 3 arguments:
  • content[value/block]
  • options[hash]<default: {}>
  • html_options[hash]<default: {}>

 # by variable 
 ui_range_field name, options, html_options 

 # or by block 
 ui_range_field options, html_options do 
   name 
 end

Options

The specific options for this component are:
  • value[string]Input's value
  • min[integer/float]The minimum acceptable value
  • max[integer/float]The maximum acceptable value
  • in[array]A range specifying the :min and :max values.
  • within[array]Same as :in
  • step[integer/float]The acceptable value granularity.

Examples

Some examples explain how to use the options present in the component.

Range Field

ui_text_field "range"

<input type="range" name="range" id="range" class="custom-range">

Range Field min, max, step and value

ui_range_field 'range', min: -3, max: 3, step: 0.2, value: 0.40

<input type="range" name="range" id="range" value="0.4" class="custom-range" min="-3" max="3" step="0.2">

Range Field with in or within



ui_range_field 'range', in: 0..100, value: 8
ui_range_field 'range', within: 5..10, step: 0.2, value: 6

<input type="range" name="range" id="range" value="8" class="custom-range" min="0" max="100">
<input type="range" name="range" id="range" value="6" class="custom-range" min="5" max="10" step="0.2">

Simple form

Ui Bibz is compatible with simple form. You can use defaults inputs of Simple Form and defaults inputs of Ui Bibz like ui_range_field. You can use Simple Form input options and Ui Bibz ui_range_field options.

ui_form_for(@search) do |f|
  ...
  f.input :age, as: :ui_range_field
  ...
end

Contents