Range

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

Mood Meter

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.

Mood Meter

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.

Brightness

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.

Volume 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

Disabled Range

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

API Reference

Prop	Type	Default	Description
`ID`	`string`	`""`	Unique id for the range input and label target.
`Name`	`string`	`""`	Form field name.
`Label`	`string`	`""`	Visible label for the slider.
`Value`	`string`	`"0"`	Current value.
`Min`	`string`	`"0"`	Minimum value.
`Max`	`string`	`"100"`	Maximum value.
`Step`	`string`	`"1"`	Increment between valid values.
`Disabled`	`bool`	`false`	Disables the slider.
`Required`	`bool`	`false`	Marks the input as required.
`ShowTicks`	`bool`	`false`	Renders a tick row below the input.
`Ticks`	`[]Tick`	`nil`	Custom tick labels; empty uses the default min-to-max scale.
`ShowValue`	`bool`	`false`	Renders a live Alpine.js value badge.
`LeadingIcon`	`templ.Component`	`nil`	Icon component rendered before the control.
`TrailingIcon`	`templ.Component`	`nil`	Icon component rendered after the control.
`RootClass`	`string`	`""`	Extra classes on the container.
`InputClass`	`string`	`""`	Extra classes on the range input.
`InputAttrs`	`templ.Attributes`	`nil`	Arbitrary attributes on the input (e.g. hx-post, x-on:input, data-*).

Radio Rating