Class: UI::SliderThumb

Inherits:
Phlex::HTML
  • Object
show all
Includes:
SliderThumbBehavior
Defined in:
app/components/ui/slider_thumb.rb

Overview

SliderThumb - Phlex implementation

The thumb is the draggable handle that controls the slider value. Uses SliderThumbBehavior module for shared logic.

Examples:

Basic usage

render UI::Slider.new(default_value: [50]) do
  render UI::SliderTrack.new do
    render UI::SliderRange.new
  end
  render UI::SliderThumb.new
end

Range slider with two thumbs

render UI::Slider.new(default_value: [25, 75]) do
  render UI::SliderTrack.new do
    render UI::SliderRange.new
  end
  render UI::SliderThumb.new
  render UI::SliderThumb.new
end

Instance Method Summary collapse

Methods included from SliderThumbBehavior

#slider_thumb_html_attributes

Constructor Details

#initialize(disabled: false, classes: "", attributes: {}) ⇒ SliderThumb

Returns a new instance of SliderThumb.

Parameters:

  • disabled (Boolean) (defaults to: false) —

    Whether the thumb is disabled

  • classes (String) (defaults to: "") —

    Additional CSS classes

  • attributes (Hash) (defaults to: {}) —

    Additional HTML attributes



30
31
32
33
34
 
# File 'app/components/ui/slider_thumb.rb', line 30

def initialize(disabled: false, classes: "", attributes: {})
  @disabled = disabled
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#view_template ⇒ Object 



36
37
38
39
40
41
42
43
44
45
46
 
# File 'app/components/ui/slider_thumb.rb', line 36

def view_template
  all_attributes = slider_thumb_html_attributes

  # Merge data attributes
  all_attributes[:data] = all_attributes[:data].merge(@attributes.fetch(:data, {}))

  # Merge with user attributes (except data which we already handled)
  all_attributes = all_attributes.merge(@attributes.except(:data))

  div(**all_attributes)
end