Slider

Control for selecting a numeric value within a range.

Source Tailwind Javascript

Installation

  1. Install the component

    templui add slider
  2. Add the JavaScript to your layout

    @slider.Script()
    

    Call this template in your base layout file (e.g., in the <head> section).

Examples

Value

Steps

Disabled

External Value

External value (linked to the slider):

%

API Reference

Required parameter
Hover for description

Slider

Main slider container component.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil

Input

The actual range input element.

Name Type Default
ID
string
randomID
Class
string
""
Attributes
templ.Attributes
nil
Name
string
""
Min
int
0
Max
int
0
Step
int
0
Value
int
0
Disabled
bool
false

Value

Display element for the current slider value.

Name Type Default
ID
string
""
Class
string
""
Attributes
templ.Attributes
nil
For
string
""