Class: UI::Slider

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

Overview

Slider - Phlex implementation

A range slider component for selecting values within a range. Uses SliderBehavior module for shared logic.

Examples:

Basic usage

render UI::Slider.new(default_value: [50], max: 100) 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], max: 100) 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 SliderBehavior

#merged_data_attributes, #slider_data_attributes, #slider_html_attributes

Constructor Details

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

Returns a new instance of Slider.

Parameters:

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

    Minimum value

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

    Maximum value

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

    Step increment

  • value (Array) (defaults to: nil) —

    Current value (controlled)

  • default_value (Array) (defaults to: nil) —

    Initial value (uncontrolled)

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

    Center point for bidirectional sliders

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

    Whether the slider is disabled

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

    Orientation (horizontal, vertical)

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

    Whether the slider is inverted

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

    Form field name

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

    Additional CSS classes

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

    Additional HTML attributes



39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
 
# File 'app/components/ui/slider.rb', line 39

def initialize(
  min: 0,
  max: 100,
  step: 1,
  value: nil,
  default_value: nil,
  center_point: nil,
  disabled: false,
  orientation: "horizontal",
  inverted: false,
  name: "",
  classes: "",
  attributes: {}
)
  @min = min
  @max = max
  @step = step
  @value = value
  @center_point = center_point
  @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

#view_template(&block) ⇒ Object 



67
68
69
70
71
72
73
74
75
76
77
78
79
 
# File 'app/components/ui/slider.rb', line 67

def view_template(&block)
  all_attributes = slider_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) do
    yield if block_given?
  end
end