Slider

Control for selecting a numeric value within a range.

Source Tailwind CSS JavaScript

Installation

templui add slider

Load the script once in your layout:

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

Examples

Value

package showcase

import "github.com/templui/templui/components/slider"

templ SliderValue() {
	<div class="w-full max-w-sm">
		<div class="flex justify-end mb-1">
			@slider.Value(slider.ValueProps{
				For: "slider-value",
			})
		</div>
		@slider.Slider(slider.Props{
			ID:    "slider-value",
			Value: 75,
		})
	</div>
}

Steps

Zoom Level

package showcase

import (
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/components/slider"
)

templ SliderSteps() {
	<div class="w-full max-w-sm">
		<div class="flex justify-between items-center mb-1">
			@label.Label() {
				Zoom Level
			}
			@slider.Value(slider.ValueProps{
				For: "slider-steps",
			})
		</div>
		@slider.Slider(slider.Props{
			ID:    "slider-steps",
			Name:  "slider-steps",
			Value: 100,
			Min:   0,
			Max:   200,
			Step:  25,
		})
	</div>
}

Disabled

Volume

package showcase

import (
	"github.com/templui/templui/components/label"
	"github.com/templui/templui/components/slider"
)

templ SliderDisabled() {
	<div class="w-full max-w-sm">
		<div class="flex justify-between items-center mb-1">
			@label.Label() {
				Volume
			}
			@slider.Value(slider.ValueProps{
				For: "slider-disabled",
			})
		</div>
		@slider.Slider(slider.Props{
			ID:       "slider-disabled",
			Value:    20,
			Min:      -20,
			Max:      200,
			Step:     20,
			Disabled: true,
		})
	</div>
}

External Value

External value (linked to the slider):

package showcase

import "github.com/templui/templui/components/slider"

templ SliderExternalValue() {
	<div class="space-y-6 w-full max-w-sm">
		@slider.Slider(slider.Props{
			ID:    "slider-external-value",
			Value: 50,
		})
		<div class="bg-muted p-4 rounded-md">
			<p class="text-sm text-muted-foreground mb-2">External value (linked to the slider):</p>
			<div class="text-3xl font-bold flex gap-1">
				@slider.Value(slider.ValueProps{
					For:   "slider-external-value",
					Class: "text-3xl font-bold text-primary",
				})
				%
			</div>
		</div>
	</div>
}

Range

package showcase

import "github.com/templui/templui/components/slider"

templ SliderRange() {
	<div class="w-full max-w-sm">
		<div class="flex justify-between mb-1">
			@slider.Value(slider.ValueProps{
				For: "slider-range-min",
			})
			@slider.Value(slider.ValueProps{
				For: "slider-range-max",
			})
		</div>
		@slider.Range(slider.RangeProps{
			ID:       "slider-range",
			MinValue: 25,
			MaxValue: 75,
		})
	</div>
}

API Reference

Required parameter

Hover for description

Slider

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`

Range

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`

Value

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`	`""`

Menu

Getting Started

Components

Slider

Installation

Examples

API Reference

Slider

Range

Value