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.



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