Class: PhlexKit::Slider

Inherits:
BaseComponent show all
Defined in:
app/components/phlex_kit/slider/slider.rb

Overview

Range slider, ported from shadcn/ui's Slider. Radix's slider is replaced with a styled native (keyboard/touch/forms for free); the tiny phlex-kit--slider controller keeps the filled-track width in sync via a custom property. .pk-slider (slider.css).

Instance Method Summary collapse

Methods inherited from BaseComponent

#on

Constructor Details

#initialize(min: 0, max: 100, step: 1, value: nil, **attrs) ⇒ Slider

Returns a new instance of Slider.



7
8
9
10
11
12
13
 
# File 'app/components/phlex_kit/slider/slider.rb', line 7

def initialize(min: 0, max: 100, step: 1, value: nil, **attrs)
  @min = min
  @max = max
  @step = step
  @value = value || (@min + (@max - @min) / 2)
  @attrs = attrs
end

Instance Method Details

#view_template ⇒ Object 



15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
# File 'app/components/phlex_kit/slider/slider.rb', line 15

def view_template
  input(**mix({
    type: :range,
    min: @min,
    max: @max,
    step: @step,
    value: @value,
    class: "pk-slider",
    style: "--pk-slider-progress: #{progress}%",
    data: {
      controller: "phlex-kit--slider",
      action: "input->phlex-kit--slider#update"
    }
  }, @attrs))
end