Class: Shadcn::Slider::Component

Inherits:
ApplicationViewComponent show all
Defined in:
app/components/shadcn/slider/component.rb

Overview

Port of registry/new-york-v4/ui/slider.tsx, whose behaviour is Radix's Slider — 1,044 lines against shadcn's 63, vendored at vendor/radix/ui/slider.tsx.

Composes the whole thing, as shadcn's own does: a track holding the filled range, and one thumb per value. Every position is computed here as well as in the controller, so the slider is in the right place before any JavaScript runs — the server knows the values, and a slider that starts at zero and jumps is worse than one that never moves.

Constant Summary

Constants inherited from ApplicationViewComponent

ApplicationViewComponent::CONTENTS_STYLE, ApplicationViewComponent::VOID_TAGS

Instance Attribute Summary collapse

Attributes inherited from ApplicationViewComponent

#attributes

Instance Method Summary collapse

Methods inherited from ApplicationViewComponent

#css_classes, default_tag, #merged_style, #render_element, #shadcn_t, slot_name, #style_variants, #tag_name

Constructor Details

#initialize(value: nil, min: 0, max: 100, step: 1, orientation: :horizontal, disabled: false, min_steps_between_thumbs: 0, name: nil, aria_label: nil, **attributes) ⇒ Component

value: takes a number or a list. Upstream's default when neither value nor defaultValue is given is [min, max] — two thumbs, which is surprising until you notice it is what makes the component's own example a range (slider.tsx:17-24).



33
34
35
36
37
38
39
40
41
42
43
44
45
46
 
# File 'app/components/shadcn/slider/component.rb', line 33

def initialize(value: nil, min: 0, max: 100, step: 1, orientation: :horizontal,
               disabled: false, min_steps_between_thumbs: 0, name: nil,
               aria_label: nil, **attributes)
  @min = min
  @max = max
  @step = step
  @orientation = orientation&.to_sym || :horizontal
  @disabled = disabled
  @min_steps_between_thumbs = min_steps_between_thumbs
  @name = name
  @aria_label = aria_label
  @values = Array(value.nil? ? [ min, max ] : value)
  super(**attributes)
end

Instance Attribute Details

#aria_label ⇒ Object (readonly)

Returns the value of attribute aria_label.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def aria_label
  @aria_label
end

#disabled ⇒ Object (readonly)

Returns the value of attribute disabled.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def disabled
  @disabled
end

#max ⇒ Object (readonly)

Returns the value of attribute max.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def max
  @max
end

#min ⇒ Object (readonly)

Returns the value of attribute min.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def min
  @min
end

#min_steps_between_thumbs ⇒ Object (readonly)

Returns the value of attribute min_steps_between_thumbs.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def min_steps_between_thumbs
  @min_steps_between_thumbs
end

#name ⇒ Object (readonly)

Returns the value of attribute name.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def name
  @name
end

#orientation ⇒ Object (readonly)

Returns the value of attribute orientation.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def orientation
  @orientation
end

#step ⇒ Object (readonly)

Returns the value of attribute step.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def step
  @step
end

#values ⇒ Object (readonly)

Returns the value of attribute values.



26
27
28
 
# File 'app/components/shadcn/slider/component.rb', line 26

def values
  @values
end

Instance Method Details

#call ⇒ Object 



70
71
72
 
# File 'app/components/shadcn/slider/component.rb', line 70

def call
  render_element(body: safe_join([ track, *thumbs, *inputs ]))
end

#element_attributes(**defaults) ⇒ Object 



48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
 
# File 'app/components/shadcn/slider/component.rb', line 48

def element_attributes(**defaults)
  super(**{
    "data-orientation" => orientation,
    "data-disabled" => (disabled.presence && ""),
    "aria-disabled" => (disabled.presence && "true"),
    "data-controller" => "shadcn--slider",
    "data-shadcn--slider-min-value" => min,
    "data-shadcn--slider-max-value" => max,
    "data-shadcn--slider-step-value" => step,
    "data-shadcn--slider-orientation-value" => orientation,
    "data-shadcn--slider-disabled-value" => disabled,
    "data-shadcn--slider-min-steps-value" => min_steps_between_thumbs,
    "data-action" => "pointerdown->shadcn--slider#trackDown",
    # The transform every thumb's wrapper reads. Radix publishes it on the
    # root so one declaration serves every thumb and the axis is decided
    # in one place.
    style: merged_style(
      "--radix-slider-thumb-transform: #{orientation == :vertical ? 'translateY(50%)' : 'translateX(-50%)'};"
    )
  }.compact.merge(defaults))
end