Class: Daisy::DataInput::RangeComponent

Inherits:
LocoMotion::BaseComponent show all
Defined in:
app/components/daisy/data_input/range_component.rb

Overview

The Range component renders a DaisyUI styled range input slider. It can be used standalone or with a form builder, and supports customization of min/max values, step increments, and color variants.

Constant Summary

Constants inherited from LocoMotion::BaseComponent

LocoMotion::BaseComponent::EMPTY_PART_IGNORED_TAGS, LocoMotion::BaseComponent::SELF_CLOSING_TAGS

Instance Attribute Summary collapse

Attributes inherited from LocoMotion::BaseComponent

#config, #loco_parent

Instance Method Summary collapse

Methods inherited from LocoMotion::BaseComponent

build, #component_ref, #config_option, #cssify, define_modifier, define_modifiers, define_part, define_parts, define_size, define_sizes, #empty_part_content, #inspect, #part, register_component_initializer, register_component_setup, #rendered_css, #rendered_data, #rendered_html, #rendered_stimulus_controllers, #rendered_tag_name, renders_many, renders_one, set_component_name, #set_loco_parent, #strip_spaces

Constructor Details

#initialize(**kws) ⇒ RangeComponent

Instantiate a new Range component.

Options Hash (**kws):

  • name (String) —

    The name attribute for the range input.

  • id (String) —

    The ID attribute for the range input.

  • min (Integer) —

    The minimum value (default: 0).

  • max (Integer) —

    The maximum value (default: 100).

  • step (Integer) —

    The step increment (default: 1).

  • value (Integer) —

    The current value (default: min).

  • disabled (Boolean) —

    Whether the range input is disabled. Defaults to false.

  • required (Boolean) —

    Whether the range input is required for form validation. Defaults to false.



44
45
46
47
48
49
50
51
52
53
54
55
 
# File 'app/components/daisy/data_input/range_component.rb', line 44

def initialize(**kws)
  super

  @name = config_option(:name)
  @id = config_option(:id)
  @min = config_option(:min, 0)
  @max = config_option(:max, 100)
  @step = config_option(:step, 1)
  @value = config_option(:value, @min)
  @disabled = config_option(:disabled, false)
  @required = config_option(:required, false)
end

Instance Attribute Details

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def disabled
  @disabled
end

#id ⇒ Object (readonly)

Returns the value of attribute id.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def id
  @id
end

#max ⇒ Object (readonly)

Returns the value of attribute max.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def max
  @max
end

#min ⇒ Object (readonly)

Returns the value of attribute min.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def min
  @min
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def name
  @name
end

#required ⇒ Object (readonly)

Returns the value of attribute required.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def required
  @required
end

#step ⇒ Object (readonly)

Returns the value of attribute step.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def step
  @step
end

#value ⇒ Object (readonly)

Returns the value of attribute value.



19
20
21
 
# File 'app/components/daisy/data_input/range_component.rb', line 19

def value
  @value
end

Instance Method Details

#before_render ⇒ Object

Calls the #setup_component method before rendering the component.



60
61
62
 
# File 'app/components/daisy/data_input/range_component.rb', line 60

def before_render
  setup_component
end

#call ⇒ Object

Renders the component inline with no additional whitespace.



92
93
94
 
# File 'app/components/daisy/data_input/range_component.rb', line 92

def call
  part(:component)
end

#setup_component ⇒ Object

Sets up the component by configuring the tag name, CSS classes, and HTML attributes. Sets the tag to input with type ‘range’ and adds the ‘range’ CSS class.

This configures the min, max, step values along with name, id, value, disabled state, and required state of the range input.



71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
 
# File 'app/components/daisy/data_input/range_component.rb', line 71

def setup_component
  set_tag_name(:component, :input)

  add_css(:component, "range")

  add_html(:component, {
    type: "range",
    name: @name,
    id: @id,
    min: @min,
    max: @max,
    step: @step,
    value: @value,
    disabled: @disabled,
    required: @required
  })
end