package showcase
import "github.com/templui/templui/components/slider"
templ SliderDefault() {
<div class="w-full max-w-sm">
@slider.Slider()
</div>
}
Installation
templui add sliderLoad the script once in your layout:
<head>
@slider.Script()
</head>import "github.com/templui/templui/components/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
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
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
Slider
Single-thumb slider component.
| Name | Type | Default |
|---|---|---|
Unique identifier for the slider. Required when using the Value component. | | |
Additional CSS classes. | | |
Additional HTML attributes. | | |
Name attribute for the hidden form input. | | |
Minimum value. | | |
Maximum value. | | |
Step increment. | | |
Initial value. | | |
Whether the slider is disabled. | | |
Range
Dual-thumb range slider. Value displays use the slider ID with a -min or -max suffix.
| Name | Type | Default |
|---|---|---|
Unique identifier. Value components use {ID}-min and {ID}-max as their For value. | | |
Additional CSS classes. | | |
Additional HTML attributes. | | |
Name attribute for the min hidden input. | | |
Name attribute for the max hidden input. | | |
Minimum allowed value. | | |
Maximum allowed value. | | |
Step increment. | | |
Initial value for the min thumb. | | |
Initial value for the max thumb. | | |
Whether the slider is disabled. | | |
Value
Displays the current slider value. For range sliders use {sliderID}-min or {sliderID}-max as the For value.
| Name | Type | Default |
|---|---|---|
Unique identifier. | | |
Additional CSS classes. | | |
Additional HTML attributes. | | |
ID of the slider to link to. For range sliders append -min or -max. | | |