Creating an increment number input box

[khurram.aziz]

I’m trying to create a number input box with an up/down arrow to increment the number like so:

I saw this post but it doesn’t explain how he implemented it:

Displaying increment arrows on number input

Is there a way to make an integer input display the increment / decrement arrows that seem to be standard on number inputs on the web ? From Mozilla : [image] I imagine bubble’s “Input” element set to Integer just takes a text input and limits it to numbers instead of doing a proper number input. But is there a simple way to create an actual number input in the editor ? I’m not finding a plugin or a related forum topic.

I’ve spent over an hour trying to figure out how to implement this with set state etc., but to no avail.

Can somebody help me out here? Any tutorials? Any simple plugins where I can just have an increment number box on the page?

Thanks

[hanan1]

hi @khurram.aziz !

no worries, it is pretty simple.

1. First add a number input and set up as the screenshot below: add a number custom state and use that for the input’s initial content:
   

   
   
   I added min/max values I don’t know if you need any.

2. Add a group with two arrow icons (up&down) and group it with the input.
   

3. add a workflow that increases the content by 1 only when the input’s value is < 10
   

   

4. add a workflow that decreases the content by 1 only when the input’s value is > 1
   

   

5. for better usability, you can add a condition that communicates the invalid state for the arrows when the value = 1 or 10
   

[hanan1]

@khurram.aziz yes, it looks like you missed the first steps in my initial reply:

@hanan1

First add a number input and set up as the screenshot below: add a number custom state and use that for the input’s initial content:

glad you got it though