Class: UI::SliderComponent

Inherits:
ViewComponent::Base
  • Object
show all
Includes:
SliderBehavior
Defined in:
app/view_components/ui/slider_component.rb

Overview

Slider container component (ViewComponent) Root component for range slider with keyboard navigation

Examples:

Basic usage

<%= render UI::SliderComponent.new(default_value: [50], max: 100, step: 1) do %>
  <%= render UI::SliderTrackComponent.new do %>
    <%= render UI::SliderRangeComponent.new %>
  <% end %>
  <%= render UI::SliderThumbComponent.new %>
<% end %>

With multiple thumbs (range)

<%= render UI::SliderComponent.new(default_value: [25, 75], max: 100) do %>
  <%= render UI::SliderTrackComponent.new do %>
    <%= render UI::SliderRangeComponent.new %>
  <% end %>
  <%= render UI::SliderThumbComponent.new %>
  <%= render UI::SliderThumbComponent.new %>
<% end %>

Instance Method Summary collapse

Methods included from SliderBehavior

#merged_data_attributes, #slider_data_attributes, #slider_html_attributes

Constructor Details

#initialize(min: 0, max: 100, step: 1, value: nil, default_value: nil, disabled: false, orientation: "horizontal", inverted: false, name: "", center_point: nil, classes: "", attributes: {}) ⇒ SliderComponent

Returns a new instance of SliderComponent.

Parameters:

  • min (Integer) (defaults to: 0) —

    minimum value (default: 0)

  • max (Integer) (defaults to: 100) —

    maximum value (default: 100)

  • step (Integer) (defaults to: 1) —

    step increment (default: 1)

  • value (Array<Integer>) (defaults to: nil) —

    controlled value

  • default_value (Array<Integer>) (defaults to: nil) —

    default value (default: [min])

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

    whether slider is disabled

  • orientation (String) (defaults to: "horizontal") —

    “horizontal” or “vertical” (default: “horizontal”)

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

    whether to invert the slider direction

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

    form input name

  • center_point (Integer, nil) (defaults to: nil) —

    center point for bidirectional sliders (e.g., 0 for balance)

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

    additional CSS classes

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

    additional HTML attributes



37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
 
# File 'app/view_components/ui/slider_component.rb', line 37

def initialize(min: 0, max: 100, step: 1, value: nil, default_value: nil, disabled: false, orientation: "horizontal", inverted: false, name: "", center_point: nil, classes: "", attributes: {})
  @min = min
  @max = max
  @step = step
  @value = value
  @center_point = center_point
  # If center_point is defined and no default_value provided, start at center
  @default_value = default_value || (center_point ? [center_point] : [min])
  @disabled = disabled
  @orientation = orientation
  @inverted = inverted
  @name = name
  @classes = classes
  @attributes = attributes
end

Instance Method Details

#call ⇒ Object 



53
54
55
56
57
58
59
60
 
# File 'app/view_components/ui/slider_component.rb', line 53

def call
  attrs = slider_html_attributes
  attrs[:data] = attrs[:data].merge(@attributes.fetch(:data, {}))

  content_tag :div, **attrs.merge(@attributes.except(:data)) do
    content
  end
end