55 lines
1.1 KiB
Plaintext
55 lines
1.1 KiB
Plaintext
package base
|
|
|
|
import "fmt"
|
|
|
|
type RangeProps struct {
|
|
ID string
|
|
Label string
|
|
Name string
|
|
Value int
|
|
Min int
|
|
Max int
|
|
Step int
|
|
Class string
|
|
Size string
|
|
}
|
|
|
|
templ Range(props RangeProps) {
|
|
<div class="form-control">
|
|
<label
|
|
class="label space-x-1 w-full"
|
|
x-data={ fmt.Sprintf("{ value: %d }", props.Value) }
|
|
>
|
|
if props.Label != "" {
|
|
<span
|
|
class={
|
|
templ.KV("text-xs", props.Size == "xs"),
|
|
templ.KV("text-sm", props.Size == "sm"),
|
|
templ.KV("text-lg", props.Size == "lg"),
|
|
templ.KV("text-xl", props.Size == "xl"),
|
|
}
|
|
>{ props.Label }</span>
|
|
}
|
|
<input
|
|
type="range"
|
|
if props.ID != "" {
|
|
id={ props.ID }
|
|
}
|
|
name={ props.Name }
|
|
min={ fmt.Sprintf("%d", props.Min) }
|
|
max={ fmt.Sprintf("%d", props.Max) }
|
|
x-model="value"
|
|
class={
|
|
"range", props.Class,
|
|
templ.KV("range-xs", props.Size == "xs"),
|
|
templ.KV("range-sm", props.Size == "sm"),
|
|
templ.KV("range-lg", props.Size == "lg"),
|
|
templ.KV("range-xl", props.Size == "xl"),
|
|
}
|
|
step={ fmt.Sprintf("%d", props.Step) }
|
|
/>
|
|
<div x-text="value" class="w-full max-w-7"></div>
|
|
</label>
|
|
</div>
|
|
}
|