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">
		@slider.Slider() {
			<div class="flex justify-end mb-1">
				@slider.Value(slider.ValueProps{
					For: "slider-value",
				})
			</div>
			@slider.Input(slider.InputProps{
				ID:    "slider-value",
				Value: 75,
				Min:   0,
				Max:   100,
				Step:  1,
			})
		}
	</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">
		@slider.Slider() {
			<div class="flex justify-between items-center mb-1">
				@label.Label() {
					Zoom Level
				}
				<div class="flex items-center">
					@slider.Value(slider.ValueProps{
						For: "slider-steps",
					})
				</div>
			</div>
			@slider.Input(slider.InputProps{
				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">
		@slider.Slider() {
			<div class="flex justify-between items-center mb-1">
				@label.Label() {
					Volume
				}
				@slider.Value(slider.ValueProps{
					For: "slider-disabled",
				})
			</div>
			@slider.Input(slider.InputProps{
				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">
		<div>
			@slider.Slider() {
				@slider.Input(slider.InputProps{
					ID:    "slider-external-value",
					Value: 50,
					Min:   0,
					Max:   100,
					Step:  1,
				})
			}
		</div>
		<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>
}

API Reference

Required parameter

Hover for description

Slider

Main slider container component.

Name	Type	Default
`ID` Unique identifier for the slider component	`string`	`""`
`Class` Additional CSS classes to apply to the slider container	`string`	`""`
`Attributes` Additional HTML attributes to apply to the slider container	`templ.Attributes`	`nil`

Input

The actual range input element.

Name	Type	Default
`ID` Unique identifier for the input element	`string`	`randomID`
`Class` Additional CSS classes to apply to the input	`string`	`""`
`Attributes` Additional HTML attributes to apply to the input	`templ.Attributes`	`nil`
`Name` Name attribute for the input field	`string`	`""`
`Min` Minimum value for the slider	`int`	`0`
`Max` Maximum value for the slider	`int`	`0`
`Step` Step increment for slider values	`int`	`0`
`Value` Current value of the slider	`int`	`0`
`Disabled` Whether the slider is disabled	`bool`	`false`

Value

Display element for the current slider value.

Name	Type	Default
`ID` Unique identifier for the value display element	`string`	`""`
`Class` Additional CSS classes to apply to the value display	`string`	`""`
`Attributes` Additional HTML attributes to apply to the value display	`templ.Attributes`	`nil`
`For` ID of the slider input this value display is connected to	`string`	`""`

Menu

Getting Started

Components

Slider

Installation

Examples

API Reference

Slider

Input

Value