Range Input

Shared label and supporting-text behaviour is summarised on Inputs overview.

catnip-range-input

Props

Value & constraints

Prop	Type	Default	Description
modelValue	number	50	Numeric value; model-value in HTML / .modelValue in frameworks.
min	number	0	Minimum selectable value.
max	number	100	Maximum selectable value.
step	number	1	Increment used by pointer, touch, and keyboard interactions.

Field presentation

Prop	Type	Default	Options	Description
label	string	""	—	Visible label text when the label slot is empty.
optional	boolean	false	—	Shows optional hint on the label when not required.
optionalText	string	""	—	Overrides optional hint text (HTML: optional-text).
info	string	""	—	Info tooltip on the label (info wins over the label.suffix slot when both are set).
alignment	string	"left"	left, center, right	Label alignment.
requiredMarker	string	"*"	—	Visual required marker (HTML: required-marker).
requiredScreenReaderText	string	""	—	Supplemental screen-reader text for required fields (HTML: required-screen-reader-text).
supportingText	string | string[] | { text, intent?, icon? } | { text, intent?, icon? }[]	""	—	Consumer-provided message(s) below the field. Pass dynamic validation copy here; the range input does not generate error messages.

Range presentation

Prop	Type	Default	Description
showMinMaxLabels	boolean	true	Shows the min and max labels beside the slider.
minLabel	string	""	Custom min label. Falls back to min.
maxLabel	string	""	Custom max label. Falls back to max.
alwaysShowValueTooltip	boolean	false	Always shows the current value above the thumb. When false, the value tooltip still appears while the range is hovered, focused, or being dragged.
showInputField	boolean	false	Shows an optional numeric input bound to the same value. Invalid typed drafts use danger styling while editing.
valueInputAriaLabel	string	""	Accessible name for the optional numeric value input.

State

Prop	Type	Default	Options	Description
size	string	"m"	s, m, l	Dimensions and typography. Figma currently defines M and L; S follows the compact field scale.
intent	string	"neutral"	neutral, warning, danger, success	Consumer-driven status for supporting text and the optional value input. The slider track/thumb remain neutral/primary.
disabled	boolean	false	—	Disables the range and optional value input.
readonly	boolean	false	—	Prevents user changes while keeping the control focusable.
required	boolean	false	—	Native required and label marker.
ariaLabel	string	""	—	aria-label when there is no visible label.
ariaDescribedby	string	""	—	Extra id values merged into aria-describedby.

Advanced

Prop	Type	Default	Description
id	string	""	DOM id for the range input. Auto-generated when omitted.
name	string	""	Native name for form submission.
autofocus	boolean	false	Autofocus (use sparingly).
hideLabel	boolean	false	Hides the built-in label row.
testSelectors	object	See Test selectors	Overrides for data-test.

Events

Name	Payload	Description
update:modelValue	number	Value changed.

Slots

Name	Description
label	Custom label content; falls back to label prop.
label.action	Trailing action in the label row.
label.suffix	Custom label suffix; used only when info is empty.

Test selectors

Attribute	Default	Applies to
root	catnip-range-input	Field wrapper
control	catnip-range-input-control	Native range input
minLabel	catnip-range-input-min-label	Minimum label
maxLabel	catnip-range-input-max-label	Maximum label
valueTooltip	catnip-range-input-value-tooltip	Current value tooltip
valueInput	catnip-range-input-value-input	Optional numeric value input
supportingText	catnip-range-input-supporting-text	Supporting message