Range Input

Use catnip-range-input when a value is best chosen by relative position inside a bounded range, for example percentages, volume, confidence, or intensity.

Behaviour

• Use clear min, max, and step values. Avoid a range input when the exact value is more important than the relative position; use Number Input instead.
• Keep labels visible. A range without a label is difficult to understand, especially when several sliders appear together.
• Use show-min-max-labels when the endpoints help users interpret the scale.
• Use always-show-value-tooltip only when the exact value should remain visible at rest. Otherwise the component shows the value while hovered, focused, or dragged, which covers mouse, keyboard, touch, and pointer interaction without adding constant visual noise.
• Use show-input-field only when users may need to enter an exact value. Provide value-input-aria-label if the main label alone is not enough context.

Intents and status

The intent prop matches other field components: neutral, warning, danger, and success. It is reflected in supporting text and the optional value input, while the slider track and thumb remain neutral/primary.

Validation messages are consumer-owned. When a value violates a product rule, set intent="danger" and pass the same dynamic copy through supportingText. The component will expose that supporting text through aria-describedby, but it will not create, replace, or translate the message for you.

Accessibility

• Prefer the built-in range behavior over custom drag logic. The native input provides keyboard support and exposes slider semantics to assistive technology.
• Do not make value feedback hover-only. Hover is useful for mouse users, but keyboard users do not hover, touch devices do not have hover, and users with low vision or motor impairments can lose hover state while dragging. The value tooltip also appears on focus and during drag for this reason.
• Do not rely on color alone to communicate an error. Use intent="danger" with supporting text.
• When show-input-field is enabled, typed drafts that are outside min / max or do not match step can be visually marked as danger while the user edits. Pair that state with clear supporting text for screen-reader users.
• Avoid tiny ranges with many exact values. If precision matters, use the optional value input or a dedicated number input.