I would like to find the best widget(s) to change proportions.

Let's say I have 2 to 12 parts that sum up to 100%. I would like to create a widget where the user could those parts as they want.

For example, if there are 3 parts, the user can set the first part to 20%, the second and the third part to 40%. If the first part is increased to 30%, the second and/or the third part should be decreased, so that the sum still matches 100%.

Do widgets like that exist and if not, what would be the best approach to deal with it?

  • 1
    Are you looking for a behavior similar to this: grid.layoutit.com?
    – Nick
    Commented Jun 10, 2020 at 0:40
  • Thanks, Nick! Yes, a behavior similar to this grid would work. I will analyze the corner cases of that widget. Commented Jun 10, 2020 at 17:17

2 Answers 2


I’ve built this using bootstraps grid, the card component, col classes, and divisions of 12 in a row. So a 1/3 user selected widget gets a col-4 class applied. (4*3=12) Then we did the math by scraping the widgets currently in the bootstrap row. The user could then only select the amount left available in that row. For example you then could have combos like a col-4 (1/3 user selection) and col-8 (2/3 user selection). Or two col-6’s, or 4 widgets with col-3 classes. It worked really well. We made the user selection a dropdown on the widget builder form. This was for a configurable kpi dashboard. But how I made it work was by using math. If you had two 1/3 size widgets in a row already, you could then only add a 1/3 widget or less size widget. I believe the user selections were Full width, 2/3, 1/3, 1/4. We decided a widget smaller than 1/4 wasn’t large enough to display content so we didn’t include it. Hope that makes sense!


Your choice of widget(s) will really depend on the actual data that you are manipulating and the precision required.

Based on the basic requirements you mentioned of 2-12 parts (it is probably too many to work well ideally, but again it depends on what you are trying to do), and the fact that you are probably not going to need very precise adjustments, I think you can potentially look at an array of sliders for each of the parts, and a display that shows the total amount that the user has input for each part.

The exact interactions and how you manage the calculations (e.g. do you allow them to go over the 100% mark? are there default values? etc.) will determine the actual design and implementation, but I have designed something similar for a project where it has been used to allocated a total budget into different categories.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.