Slider

Slider

A range slider input for selecting numeric values.

123456
@popui.Slider(props.Slider{
	Name:  "volume",
	Min:   "0",
	Max:   "100",
	Value: "50",
})

With Label

Add a label using the children slot.

1234567891011
@popui.Slider(props.Slider{
	ID:    "volume",
	Name:  "volume",
	Min:   "0",
	Max:   "100",
	Value: "50",
}) {
	@popui.Label(props.Label{ID: "volume"}) {
		Volume
	}
}

With Options

Display labeled tick marks using ListOptions.

123456789101112131415161718
@popui.Slider(props.Slider{
	ID:   "size",
	Name: "size",
	Min:  "0",
	Max:  "4",
	Value: "2",
	ListOptions: []props.SliderListOption{
		{Value: "0", Label: "XS"},
		{Value: "1", Label: "S"},
		{Value: "2", Label: "M"},
		{Value: "3", Label: "L"},
		{Value: "4", Label: "XL"},
	},
}) {
	@popui.Label(props.Label{ID: "size"}) {
		Size
	}
}

Custom Step

Control the granularity of value changes with the Step prop.

123456789101112
@popui.Slider(props.Slider{
	ID:    "price",
	Name:  "price",
	Min:   "0",
	Max:   "1000",
	Step:  "50",
	Value: "500",
}) {
	@popui.Label(props.Label{ID: "price"}) {
		Price Range
	}
}

API Reference

Slider

A range slider input for selecting numeric values.

NameTypeDefaultDescription
ID string-Unique identifier (auto-generated if not provided)
Class string-Additional CSS classes to merge with slider styles
Attributes templ.Attributes-Additional HTML attributes (data-*, aria-*, etc.)
Name string-Form field name
Value string-Initial value of the slider
Min string-Minimum value
Max string-Maximum value
Step string-Step increment for value changes
ListOptions []SliderListOptionnilList of labeled tick marks to display below the slider

SliderListOption

Defines a labeled tick mark for the slider.

NameTypeDefaultDescription
Value string-The value at this position
Label string-The label to display for this value