Skip to content
v0.2.7

Range

Range sliders let users pick a numeric value from a bounded interval with native keyboard and form behavior.

Default Rendered example
Usage Example 
@rangeinput.Range(rangeinput.Config{
    ID:    "mood",
    Name:  "mood",
    Label: "Mood Meter",
    Value: "20",
    Min:   "0",
    Max:   "100",
    Step:  "1",
})

Range with Ticks

ShowTicks renders a responsive tick row below the slider. Provide Ticks to customize the labels.

Range with Ticks Rendered example
Range with Ticks 
@rangeinput.Range(rangeinput.Config{
    ID:        "moodTicks",
    Name:      "mood",
    Label:     "Mood Meter",
    Value:     "20",
    Step:      "5",
    ShowTicks: true,
})

Range with Icons

LeadingIcon and TrailingIcon frame the slider with semantic icon labels while the native input remains the interactive control.

Range with Icons Rendered example
Range with Icons 
@rangeinput.Range(rangeinput.Config{
    ID:           "brightnessIcons",
    Name:         "brightness",
    Label:        "Brightness",
    Value:        "20",
    LeadingIcon:  rangeSunDimIcon(),
    TrailingIcon: rangeSunIcon(),
})

Range with Value

ShowValue adds a compact Alpine.js value badge that updates as the slider moves.

Range with Value Rendered example
20
Range with Value 
@rangeinput.Range(rangeinput.Config{
    ID:        "volumeValue",
    Name:      "volume",
    Label:     "Volume",
    Value:     "20",
    ShowValue: true,
})

Disabled Range

Disabled blocks interaction and dims the control.

Disabled Range Rendered example
Disabled Range 
@rangeinput.Range(rangeinput.Config{
    ID:       "disabledRange",
    Name:     "disabled",
    Label:    "Disabled",
    Value:    "40",
    Disabled: true,
})

Go API

v0.2.7

The examples above cover behavior and composition. pkg.go.dev is the canonical reference for exported types, functions, methods, and Go documentation.

github.com/araihu/goshtoso/components/range
Open v0.2.7 API
Radio Rating