Slider

Installation

templui add slider

Load the script once in your layout:

<head> @slider.Script() </head>

Value

Steps

Zoom Level

Disabled

Volume

External Value

External value (linked to the slider):

%

Range

Required parameter

Hover for description

Single-thumb slider component.

Name	Type	Default
`ID` Unique identifier for the slider. Required when using the Value component.	`string`	`randomID`
`Class` Additional CSS classes.	`string`	`""`
`Attributes` Additional HTML attributes.	`templ.Attributes`	`nil`
`Name` Name attribute for the hidden form input.	`string`	`""`
`Min` Minimum value.	`int`	`0`
`Max` Maximum value.	`int`	`100`
`Step` Step increment.	`int`	`1`
`Value` Initial value.	`int`	`0`
`Disabled` Whether the slider is disabled.	`bool`	`false`

Dual-thumb range slider. Value displays use the slider ID with a -min or -max suffix.

Name	Type	Default
`ID` Unique identifier. Value components use {ID}-min and {ID}-max as their For value.	`string`	`randomID`
`Class` Additional CSS classes.	`string`	`""`
`Attributes` Additional HTML attributes.	`templ.Attributes`	`nil`
`NameMin` Name attribute for the min hidden input.	`string`	`""`
`NameMax` Name attribute for the max hidden input.	`string`	`""`
`Min` Minimum allowed value.	`int`	`0`
`Max` Maximum allowed value.	`int`	`100`
`Step` Step increment.	`int`	`1`
`MinValue` Initial value for the min thumb.	`int`	`0`
`MaxValue` Initial value for the max thumb.	`int`	`Max`
`Disabled` Whether the slider is disabled.	`bool`	`false`

Displays the current slider value. For range sliders use {sliderID}-min or {sliderID}-max as the For value.

Name	Type	Default
`ID` Unique identifier.	`string`	`""`
`Class` Additional CSS classes.	`string`	`""`
`Attributes` Additional HTML attributes.	`templ.Attributes`	`nil`
`For` ID of the slider to link to. For range sliders append -min or -max.	`string`	`""`