How can I create a number input like this?

  • Profile Image
    ade 
    Asked on April 15, 2018 at 02:19 PM

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

    1523816346numberinput.PNG

  • Profile Image
    Jim_R
    Answered on April 15, 2018 at 04:25 PM

    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.

  • Profile Image
    signsidea
    Answered on April 15, 2018 at 04:55 PM

    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!

  • Profile Image
    Jim_R
    Answered on April 15, 2018 at 06:49 PM

    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.