package showcase
import "github.com/templui/templui/components/slider"
templ SliderDefault() {
<div class="w-full max-w-sm">
@slider.Slider() {
@slider.Input()
}
</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">
@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
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
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
Slider
Main slider container component.
| Name | Type | Default |
|---|---|---|
Unique identifier for the slider component | | |
Additional CSS classes to apply to the slider container | | |
Additional HTML attributes to apply to the slider container | | |
Input
The actual range input element.
| Name | Type | Default |
|---|---|---|
Unique identifier for the input element | | |
Additional CSS classes to apply to the input | | |
Additional HTML attributes to apply to the input | | |
Name attribute for the input field | | |
Minimum value for the slider | | |
Maximum value for the slider | | |
Step increment for slider values | | |
Current value of the slider | | |
Whether the slider is disabled | | |
Value
Display element for the current slider value.
| Name | Type | Default |
|---|---|---|
Unique identifier for the value display element | | |
Additional CSS classes to apply to the value display | | |
Additional HTML attributes to apply to the value display | | |
ID of the slider input this value display is connected to | | |
