Back

Slider

Basic

0 100

With Live Value Display

0 100

Custom Range (0–500, step 10)

0 500

With Tick Labels

XSSMLXL

With Step Ticks

ShowTicks: true renders a <datalist> so the browser draws native tick marks at each step.

0 100
XSSMLXL

Usage

@forms.Slider(forms.SliderProps{
    ID:         "size",
    Name:       "size",
    Label:      "T-Shirt Size",
    Min:        "0",
    Max:        "4",
    Step:       "1",
    Value:      "2",
    ShowValue:  true,                                 // live value badge
    ShowTicks:  true,                                 // native datalist tick marks
    TickLabels: []string{"XS", "S", "M", "L", "XL"}, // labels below track
})