Creating an increment number input box

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

image

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

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

1 Like

hi @khurram.aziz !

no worries, it is pretty simple.
incrementinput

  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.
    image

  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
    image

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

glad you got it though

This topic was automatically closed after 70 days. New replies are no longer allowed.