Enlarge SpinBox buttons on mobile devices

[acgc99]

Describe the project you are working on

A mobile app to track user progress in exercise.

Describe the problem or limitation you are having in your project

I want to use the SpinBox for numeric input, but arrow buttons are too small for a mobile device. If I try to make the node bigger, they keep their image size and the clickable area is expanded only vertically.

Describe the feature / enhancement and how it helps to overcome the problem or limitation

Allow further customization on these buttons: size and image.

Describe how your proposal will work, with code, pseudo-code, mock-ups, and/or diagrams

Add options in the Editor for the requested features.

If this enhancement will not be used often, can it be worked around with a few lines of script?

Yes, it could be.

Is there a reason why this should be core and not an add-on in the asset library?

I think that this node is hard to use in mobile devices, with small screen and touch inputs.

[Calinou]

On mobile, it's prefereable to use HSlider and VSlider (+ Label or LineEdit) instead of SpinBox. SpinBox is designed with desktop in mind after all, usually for complex UIs that favorize information density.

Allow further customization on these buttons: size and image.

The image used for up-down arrows in SpinBox can already be changed using theme overrides. The image's size determines the clickable area.

[Zireael07]

The Godot editor itself on Android uses SpinBoxes though, and they're notoriously hard to touch :(

[acgc99]

On mobile, it's prefereable to use HSlider and VSlider (+ Label or LineEdit) instead of SpinBox. SpinBox is designed with desktop in mind after all, usually for complex UIs that favorize information density.

I didn't know HSlider and VSlider. I want the user just to input an integer number, without limits (some users may require a range 0-20 and others 0-100 or more). I did some testing and allow_greater doesn't seem to work in HSlider when dragging (I didn't tested lesser and VSlider): you can't get a greater value by just dragging because you can't drag outside the bar.

I though about doing a scene with a LineEdit and two buttons (up and down arrows) so the user has the option to type the number or use the buttons for small numbers if prefered. Hopefully user only would type numbers in the LineEdit.

The image used for up-down arrows in SpinBox can already be changed using theme overrides. The image's size determines the clickable area.

I was expecting it to be at the SpinBox category in the Inspector, since LineEdit and Button have an icon there.

Anyways, there is not restriction to image size:

I suggest adding options to scale the image so it fits the SpinBox size (setting image height and width equal to SpinBox height).

[acgc99]

I created a plugin in the meanwhile. It consists on different widgets, there relevant here is NumericInput.