How can I create a number input like this?

Im looking at least to create some number input that look like those, where should i start?

We have a field called a SPINNER that allows this same kind of input.

However, design-wise, it's totally different from what you have on your screenshot.

I used some CSS to make the design as close as possible to the image on your post and here's what I came up with:

https://form.jotform.com/81045784248967

Below are the codes I used to design the spinner:

.form-spinner input {

    font-size : 70px !important;

    text-align : center !important;

    box-shadow : none !important;

}

li[data-type=control_spinner] {

    border-right : 1px solid #eee;

}

.form-spinner {

    height : 100px;

    width : 100px;

    border : none !important;

}

.form-spinner-up, .form-spinner-down {

    position : relative;

    border : none !important;

    background : none !important;

    left : -47px;

    padding : 0 !important;

    margin : 0 !important;

    cursor : pointer !important;

}

.form-spinner-up {

    top : -15px;

}

.form-spinner-down {

    bottom : -15px;

}

Complete guide: How-to-Inject-Custom-CSS-Codes

Feel free to clone the form I created if needed.

Great look, is there any way to update this to work with the Card style?

I really need that one to get the final style im looking for.

Thank you so much that is amazing!

Sadly, this won't work with the Cards Layout. CSS injection is only available with the Classic Layout. The closest thing that is related to a spinner would be the EMOJI SLIDER and the STAR RATING.

Why not try the emoji slider? This field has an EVALUATION SLIDER input type that would look like this:

Then right below that, set your ROWS and COLUMNS as follows:

Although they don't look alike, functionality-wise, it's still the same with the spinner field.