Class: Shadcn::SliderComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/slider_component.rb

Overview

Slider component for selecting values within a range Uses a native range input with custom styling for reliability Matches shadcn/ui Slider component appearance

Examples:

Basic usage

<%= render Shadcn::SliderComponent.new(name: "volume", value: 50, max: 100) %>

With step

<%= render Shadcn::SliderComponent.new(name: "rating", value: 3, min: 1, max: 5, step: 1) %>

Constant Summary collapse

BASE_CLASSES = 
"shadcn-slider w-full h-1.5 rounded-full appearance-none cursor-pointer bg-primary/20 focus:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(name: nil, value: 0, min: 0, max: 100, step: 1, disabled: false, **options) ⇒ SliderComponent

Returns a new instance of SliderComponent.

Parameters:

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

    Input name attribute

  • value (Numeric) (defaults to: 0) —

    Current value

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

    Minimum value

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

    Maximum value

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

    Step increment

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

    Whether slider is disabled



23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
 
# File 'app/components/shadcn/slider_component.rb', line 23

def initialize(
  name: nil,
  value: 0,
  min: 0,
  max: 100,
  step: 1,
  disabled: false,
  **options
)
  super(**options)
  @name = name
  @value = value.to_f
  @min = min.to_f
  @max = max.to_f
  @step = step.to_f
  @disabled = disabled
end