package showcase
import "github.com/axzilla/templui/internal/components/slider"
templ SliderDefault() {
<div class="w-full max-w-sm">
@slider.Slider() {
@slider.Input()
}
</div>
}
Installation
Install the component
templui add sliderAdd the JavaScript to your layout
@slider.Script()Call this template in your base layout file (e.g., in the <head> section).
Examples
Value
package showcase
import "github.com/axzilla/templui/internal/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/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/components/slider"
)
templ SliderSteps() {
<div class="w-full max-w-sm">
@slider.Slider(slider.Props{}) {
<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/axzilla/templui/internal/components/label"
"github.com/axzilla/templui/internal/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/axzilla/templui/internal/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>
}