rangeinput

Documentation

Overview

templ: version: v0.3.1020

Index

• type Config
• type Instance
  • func Range(cfg Config) Instance
  • func (Instance) Kind() components.Kind
  • func (i Instance) Render(ctx context.Context, w io.Writer) error
• type Tick

Types

type Config

type Config struct {
	// ID is the unique identifier for the range input.
	ID string
	// Name is the form field name.
	Name string
	// Label is the visible label shown above or beside the input.
	Label string
	// Value is the current value (default: "0").
	Value string
	// Min is the minimum value (default: "0").
	Min string
	// Max is the maximum value (default: "100").
	Max string
	// Step is the increment between valid values (default: "1").
	Step string
	// Disabled disables the range input.
	Disabled bool
	// Required marks the input as required.
	Required bool
	// ShowTicks renders a tick row below the input.
	ShowTicks bool
	// Ticks overrides the default tick labels used when ShowTicks is true.
	Ticks []Tick
	// ShowValue renders a live value badge bound with Alpine.js.
	ShowValue bool
	// LeadingIcon renders before the label/input row.
	LeadingIcon templ.Component
	// TrailingIcon renders after the input row.
	TrailingIcon templ.Component
	// RootClass allows additional CSS classes on the outer container.
	RootClass string
	// InputClass allows additional CSS classes on the input.
	InputClass string
	// InputAttrs allows arbitrary attributes on the input, including hx-* or x-* hooks.
	InputAttrs templ.Attributes
}

Config holds configuration for the range component.

type Instance

type Instance struct {
	// contains filtered or unexported fields
}

Instance is a renderable range component.

func Range

func Range(cfg Config) Instance

Range returns a renderable range component.

func (Instance) Kind

func (Instance) Kind() components.Kind

Kind identifies the component as a range.

func (Instance) Render

func (i Instance) Render(ctx context.Context, w io.Writer) error

Render writes the range markup.

type Tick

type Tick struct {
	// Label is the visible tick text. Use "|" for an unlabeled mark.
	Label string
	// HideOnMobile hides the tick below the sm breakpoint.
	HideOnMobile bool
}

Tick labels one position in the optional tick row below the range input.