Class: Fluxbit::Form::RangeComponent

Inherits:
FieldComponent
  • Object
show all
Includes:
Config::Form::RangeComponent
Defined in:
app/components/fluxbit/form/range_component.rb

Overview

The ‘Fluxbit::Form::RangeComponent` renders a styled range slider for selecting numeric values within a range. It supports vertical and horizontal orientation, sizing options, helper text, labels, and full compatibility with Rails form builders. Custom classes and HTML attributes can be passed for further styling and control.

Examples:

Basic usage

= render Fluxbit::Form::RangeComponent.new(name: :volume, label: "Volume")

See Also:

  • For detailed documentation and examples.

Instance Method Summary collapse

Constructor Details

#initialize(**props) ⇒ RangeComponent

Initializes the range component with the given properties.

Parameters:

  • name (String) —

    Name of the field (required unless using form builder)

  • label (String) —

    Label for the input (optional)

  • value (Numeric) —

    Value for the range input (optional)

  • min (Numeric) —

    Minimum value for the range slider (optional)

  • max (Numeric) —

    Maximum value for the range slider (optional)

  • step (Numeric) —

    Step value for the slider (optional)

  • vertical (Boolean) —

    Renders the slider vertically if true (default: false)

  • sizing (Integer) —

    Size index for slider height/thickness (default: config default)

  • help_text (String) —

    Helper or error text below the field

  • class (String) —

    Additional CSS classes for the input element

  • ... —

    any other HTML attribute supported by the <input type=“range”> tag



27
28
29
30
31
32
33
34
35
36
37
 
# File 'app/components/fluxbit/form/range_component.rb', line 27

def initialize(**props)
  super(**props)
  @vertical = options(@props.delete(:vertical), collection: [ true, false ], default: @@vertical)
  @sizing = @props[:sizing].to_i || @@sizing
  @sizing = (styles[:sizes].count - 1) if @sizing > (styles[:sizes].count - 1)
  @props[:type] = "range"
  @props[:style] = @props[:style] || "" + ";transform: rotate(270deg);" if @vertical

  add(class: styles[:sizes][@sizing], to: @props, first_element: true)
  add(class: styles[:base], to: @props, first_element: true)
end

Instance Method Details

#call ⇒ Object 



47
48
49
50
51
 
# File 'app/components/fluxbit/form/range_component.rb', line 47

def call
  content_tag :div, **@wrapper_html do
    safe_join [ label, range, help_text ]
  end
end

#range ⇒ Object 



39
40
41
42
43
44
45
 
# File 'app/components/fluxbit/form/range_component.rb', line 39

def range
  if @form.nil?
    text_field_tag @name, @value, @props
  else
    @form.text_field(@attribute, **@props)
  end
end