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 field label when the label slot is empty.
optional	boolean	false	—	When true and not required, shows the localized optional hint.
optionalText	string	""	—	Overrides the localized optional hint (HTML: optional-text).
info	string	""	—	Info tooltip beside the label; when non-empty, it wins over the label.suffix slot.
alignment	"left" | "center" | "right"	"left"	left, center, right	Horizontal alignment of the field label block.
requiredMarker	string	"*"	—	Visual marker for required fields (HTML: required-marker).
requiredScreenReaderText	string	""	—	Optional screen-reader supplement; it does not replace required on the control (HTML: required-screen-reader-text).
supportingText	SupportingTextProp	""	—	One or more helper or validation messages. Each object requires text; intent accepts neutral, danger, warning, or success, and icon accepts a Catnip icon name. See supporting-text examples.

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.
showValueTooltip	boolean	false	Shows the current value above the thumb at rest. 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	"m" | "l"	"m"	m, l	Dimensions and typography.
intent	"neutral" | "danger" | "warning" | "success"	"neutral"	neutral, danger, warning, success	Semantic state applied to field and supporting-text styling; danger sets aria-invalid on the active value control while the slider track and thumb keep their normal colors.
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 alongside generated supporting-text ids.

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	TestSelectorsProp	See Test selectors	Overrides stable data-test values.

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