@jimka/typescript-ui

Appearance

NumberSpinner ​

NumberSpinner is a numeric input field with up / down spin buttons. Combines a borderless TextField and a vertical strip of two SpinButtons into a single bordered control.

Supports min / max clamping, step-snapping, configurable display precision, click and click-and-hold increment / decrement, keyboard arrow keys, blur-on-invalid revert, and the framework Bindable<number> interface.

Usage ​

typescript
import { Event } from '@jimka/typescript-ui/core';
import { NumberSpinner } from '@jimka/typescript-ui/component/input';
const quantity = NumberSpinner();
quantity.setMin(0);
quantity.setMax(100);
quantity.setStep(1);
quantity.setValue(10);

Event.addListener(quantity, 'change', () => {
    console.log('quantity:', quantity.getValue());
});

panel.addComponent(quantity);

Common methods ​

MethodPurpose
getValue() / setValue(n)Read / write the numeric value.
setMin(n) / setMax(n)Range clamping.
setStep(n)Increment per spin click and keyboard arrow press.
setPrecision(n)Number of decimal digits in the displayed text.
addBindingListener(fn)Subscribe to user-driven changes (used by Binding).

Behavior ​

  • Click-and-hold on a spin button accelerates after 400 ms — see SpinButton.
  • Pressing ↑ / ↓ increments / decrements by step.
  • Typing an out-of-range value and blurring reverts to the last valid value.
  • Display precision controls only how many digits are shown; the underlying value retains full precision.

See also ​