Range Input

The catnip-range-input custom element lets users choose a numeric value within a known range. It uses the same integrated label and supporting-text patterns as Input, Number Input, and the shared Inputs overview.

Overview

• Value (v-model): model-value / .modelValue is a number.
• Bounds: min and max define the selectable range. Defaults are 0 and 100.
• Step: step controls keyboard and pointer increments. Default is 1.
• Native control: The component uses input[type="range"] internally, so pointer, touch, and keyboard behaviour follow the platform.
• Value tooltip: The current value appears above the thumb while the slider is hovered, focused, or being dragged. Set alwaysShowValueTooltip to keep it visible at all times.
• Validation copy: The component does not generate error messages. Consumers pass dynamic validation copy through supportingText and set intent to match the state.
• Forms: The current numeric value is submitted when name is set.

Live example

Accessibility

• Label: Use the label prop or label slot; for / id wiring is handled automatically.
• Keyboard: Native range keyboard support is preserved. Arrow keys adjust by step; Home/End move to min/max in browsers that support it.
• Value feedback: The native range exposes its current value to assistive technologies, so screen readers can announce changes through the control itself. For sighted mouse, keyboard, touch, low-vision, and motor-impaired users, the visual value tooltip appears while the slider is hovered, focused, or being dragged. It is not hover-only because hover is unavailable on most touch devices, easy to lose while dragging, and unreachable for keyboard-only users. Use alwaysShowValueTooltip when the value should remain visible even at rest.
• Invalid state: intent="danger" is reflected in supporting text and the optional value input; the slider track and thumb stay neutral/primary. When showInputField is enabled, a temporary typed value outside min / max or off step is shown with danger styling while the user edits. Pass the matching validation message through supportingText; aria-describedby includes it when present.
• Readonly: Because native range inputs do not support readonly, Catnip prevents value-changing pointer and keyboard interactions while keeping the control focusable.