Range Field(ui_range_field)Bootstrap Logo

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]
  • html_options[hash]<default: {}>
  • 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:
  • action[string](use component stimulus-options method)
  • cache[string](use to cache your component)
  • controller[string](use component stimulus-options method)
  • in[array]A range specifying the :min and :max values.
  • max[integer/float]The maximum acceptable value
  • min[integer/float]The minimum acceptable value
  • state[symbol](:disabled, :active)(use component state method)
  • status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)(use component status method)
  • step[integer/float]The acceptable value granularity.
  • target[string](use component stimulus-options method)
  • thumb_status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)
  • track_status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)
  • turbo[string](use component turbo method)
  • value[string]Input's value
  • within[array]Same as :in

Examples

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

Range Field

ui_range_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">

Tick

ui_range_field 'range', min: -10, max: 10, step: 2, value: 2, tick: true

<input type="range" name="range" id="range" value="2" class="form-range" min="-10" max="10" step="2" list="range-69986-list">
<datalist id="range-69986-list">
  <option value="-10" label="-10">-10</option>
  <option value="-8"></option>
  <option value="-6"></option>
  <option value="-4"></option>
  <option value="-2"></option>
  <option value="0" label="0">0</option>
  <option value="2"></option>
  <option value="4"></option>
  <option value="6"></option>
  <option value="8"></option>
  <option value="10" label="10">10</option>
</datalist>

Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_range_field :range, status: :primary, value: 0
ui_range_field :range, status: :secondary, value: 14
ui_range_field :range, status: :success, value: 28
ui_range_field :range, status: :danger, value: 42
ui_range_field :range, status: :warning, value: 56
ui_range_field :range, status: :info, value: 70
ui_range_field :range, status: :light, value: 84
ui_range_field :range, status: :dark, value: 98

Thumb Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_range_field :range, thumb_status: :primary, value: 0
ui_range_field :range, thumb_status: :secondary, value: 14
ui_range_field :range, thumb_status: :success, value: 28
ui_range_field :range, thumb_status: :danger, value: 42
ui_range_field :range, thumb_status: :warning, value: 56
ui_range_field :range, thumb_status: :info, value: 70
ui_range_field :range, thumb_status: :light, value: 84
ui_range_field :range, thumb_status: :dark, value: 98

Track Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_range_field :range, thumb_status: :dark, track_status: :primary, value: 0
ui_range_field :range, thumb_status: :dark, track_status: :secondary, value: 14
ui_range_field :range, thumb_status: :dark, track_status: :success, value: 28
ui_range_field :range, thumb_status: :dark, track_status: :danger, value: 42
ui_range_field :range, thumb_status: :dark, track_status: :warning, value: 56
ui_range_field :range, thumb_status: :dark, track_status: :info, value: 70
ui_range_field :range, thumb_status: :dark, track_status: :light, value: 84
ui_range_field :range, thumb_status: :dark, track_status: :dark, value: 98

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