How can I create a input form where all numerical selections must add up to 100 total?

Ask the community
, ,
1

Hello fellow veloers, I’m trying to create an input form where site members may select how they want to allocate each percentage of their total budget.

864×828 262 KB

For example, they may select a budget allocation of:

  • housing: 30%

  • food: 20%

  • recreation: 10%

  • savings: 10%

  • transportation: 10%

  • other bills: 20%
    (image for reference/inspiration only)

My question is:

How can I set up the form to allow only a total of 100% of the budget to be claimed?

I’d even be happy to do something similar to the “customize proportions” slider we see on the columns layout tool in the editor:

I’m open to any sort of UI for the form - be it a visual slider, or just using numbers typed into fields. But the UI would need to react to the users input to correct for when the user allocates more than 100% of their budget.

I’d even settle for some sort of validation function that adds up all inputs and prevents the user from submitting the form if their inputs do not equal 100. (if something like that exists)

Any ideas on how to accomplish this?

Thanks everyone!