Components Slider select

Slider select

Generic segmented pill control with a sliding active thumb. The shape used by the dashboard period filter — now extracted so any 2–5 option group can adopt it (period filters, timeframe pickers, view-mode toggles). <koala-period-filter> is a domain wrapper around this with the period option list baked in.

<koala-slider-select>

Canonical — period filter

7d 30d 3m 12m

Three options — view switcher

List Grid Map

Two options — yes / no

Yes No

For yes/no questions inside forms (with model binding), prefer <koala-radio-yes-no> — slider-select is a navigation control, not a form field.

Props

Attribute	Values	Notes
options	IReadOnlyList<SliderOption>	Required. Each option is a `(Key, Label)` pair.
active-key	String	Required. Must match one option's `Key`; the helper throws otherwise.
base-url	URL	Each option link appends `?{query-param}={key}`.
target-id	String	Alpine-AJAX swap target. Default `main`.
query-param	String	URL parameter name. Default `period`.