Slider Field(ui_slider_field)Ui Bibz Logo

UiBibz::Ui::Core::Forms::Numbers::SliderField

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)
  • input_name_max[string]Override the name of the last input
  • input_name_min[string]Override the name of the first input
  • 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_max[integer/float]Placement of the min thumb
  • thumb_min[integer/float]Placement of the min thumb
  • track_status[symbol](:primary, :secondary, :success, :danger, :warning, :info, :light, :dark)
  • turbo[string](use component turbo method)

Examples

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

Slider Field

By default, ui_slider_field generate 2 inputs with suffix names: _min and _max:
Eq. ui_slider_field "price" will generate two inputs with price_min and price_max name.
You can override these inputs with the options: input_name_min and input_name_max. 

ui_slider_field "price"

<div class="slider">
  <div>
    <div class="slider-inverse-left" style="width: 100%"></div>
    <div class="slider-inverse-right" style="width: 100%"></div>
    <div class="slider-range" style="left: 0%; right: 0%"></div>
    <div class="slider-thumb slider-thumb-left" style="left: 0%"></div>
    <div class="slider-thumb slider-thumb-right" style="left: 100%"></div>
  </div>
  <input type="range" name="price_min" id="price_min" value="0" max="100" min="0" step="1">
  <input type="range" name="price_max" id="price_max" value="100" max="100" min="0" step="1">
</div>

Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_slider_field :price, status: :primary, thumb_min: 0, thumb_max: 100, status: status
ui_slider_field :price, status: :secondary, thumb_min: 5, thumb_max: 95, status: status
ui_slider_field :price, status: :success, thumb_min: 10, thumb_max: 90, status: status
ui_slider_field :price, status: :danger, thumb_min: 15, thumb_max: 85, status: status
ui_slider_field :price, status: :warning, thumb_min: 20, thumb_max: 80, status: status
ui_slider_field :price, status: :info, thumb_min: 25, thumb_max: 75, status: status
ui_slider_field :price, status: :light, thumb_min: 30, thumb_max: 70, status: status
ui_slider_field :price, status: :dark, thumb_min: 35, thumb_max: 65, status: status

<div id="price-0" class="slider-primary slider">
  <div>
    <div class="slider-inverse-left" style="width: 100%"></div>
    <div class="slider-inverse-right" style="width: 100%"></div>
    <div class="slider-range" style="left: 0%; right: 0%"></div>
    <div class="slider-thumb slider-thumb-left" style="left: 0%"></div>
    <div class="slider-thumb slider-thumb-right" style="left: 100%"></div>
  </div>
  <input type="range" name="price_min" id="price_min" value="0" max="100" min="0" step="1">
  <input type="range" name="price_max" id="price_max" value="100" max="100" min="0" step="1">
</div>

Track Status

The status option has following symbols for argument:
  • :primary
  • :secondary
  • :success
  • :danger
  • :warning
  • :info
  • :light
  • :dark
ui_slider_field 'price', { thumb_min: 20, thumb_max: 70, track_status: :dark }, { id: "price-dark" }
ui_slider_field 'price', { thumb_min: 30, thumb_max: 60, status: :dark, track_status: :primary }, { id: "price-primary" }

""

Thumb min and max

30
70
ui_slider_header target: "price", thumb_min: 30, thumb_max: 70
ui_slider_field 'price', { thumb_min: 30, thumb_max: 70 }, { id: "price" }

<div data-target="price" class="slider-header">
  <div class="slider-header-min">
    <label>Min: </label>
    <span>30</span>
  </div>
  <div class="slider-header-max">
    <label>max: </label>
    <span>70</span>
  </div>
</div>
<div id="price" class="slider">
  <div>
    <div class="slider-inverse-left" style="width: 100%"></div>
    <div class="slider-inverse-right" style="width: 100%"></div>
    <div class="slider-range" style="left: 30%; right: 30%"></div>
    <div class="slider-thumb slider-thumb-left" style="left: 30%"></div>
    <div class="slider-thumb slider-thumb-right" style="left: 70%"></div>
  </div>
  <input type="range" name="price_min" id="price_min" value="30" max="100" min="0" step="1">
  <input type="range" name="price_max" id="price_max" value="70" max="100" min="0" step="1">
</div>

Options

The ui_slider_header options:

  • label_max[float integer]Text of the right label
  • label_min[string]Text of the the left label
  • target[string]Name of the slider id for the connection
  • thumb_max[float integer]The value of the right thumb
  • thumb_min[float integer]The value of the left thumb

The ui_slider_header can be customed with css like this:

.slider-header{
  display: flex;
  justify-content: space-between;
}

-60
100
ui_slider_header target: "sensor", thumb_min: -60, thumb_max: 100, class: "slider-header-inline", label_min: "Price min.", label_max: "Price max."
ui_slider_field 'sensor', min: -120, thumb_min: -60, thumb_max: 100, max: 120, step: 20

<div data-target="sensor" class="slider-header-inline slider-header">
  <div class="slider-header-min">
    <label>Temp min.</label>
    <span>-60</span>
  </div>
  <div class="slider-header-max">
    <label>Temp max.</label>
    <span>100</span>
  </div>
</div>
<div id="sensor" class="slider" min="-120" max="120" step="20">
  <div>
    <div class="slider-inverse-left" style="width: 100%"></div>
    <div class="slider-inverse-right" style="width: 100%"></div>
    <div class="slider-range" style="left: 25%; right: 8%"></div>
    <div class="slider-thumb slider-thumb-left" style="left: 25%"></div>
    <div class="slider-thumb slider-thumb-right" style="left: 92%"></div>
  </div>
  <input type="range" name="sensor_min" id="sensor_min" value="-60" max="120" min="-120" step="20">
  <input type="range" name="sensor_max" id="sensor_max" value="100" max="120" min="-120" step="20">
</div>

State

ui_slider_field 'age', state: :disabled

<div class="disabled slider">
  <div>
    <div class="slider-inverse-left" style="width: 100%"></div>
    <div class="slider-inverse-right" style="width: 100%"></div>
    <div class="slider-range" style="left: 30%; right: 30%"></div>
    <div class="slider-thumb slider-thumb-left" style="left: 30%"></div>
    <div class="slider-thumb slider-thumb-right" style="left: 70%"></div>
  </div>
  <input type="range" name="age_min" id="age_min" value="30" max="100" min="0" step="1" disabled="disabled">
  <input type="range" name="age_max" id="age_max" value="70" max="100" min="0" step="1" disabled="disabled">
</div>

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_slider_field. You can use Simple Form input options and Ui Bibz ui_slider_field options.

0
100
ui_slider_header target: "new_user", class: "slider-header-inline"
ui_form_for(@user) do |f|
  ...
  f.input :name, as: :ui_number_field, label: false
  ...
end