In my case I'm using currencies but this could apply to many situations.

In my webapp a user is asked to define a currency distribution that (ideally) adds up to 100%. I present the currencies and the user defines the values in each. Currently I just have a simple number input box for each currency and the user types it in:

enter image description here

There must be a better, more visual way of doing this that perhaps also makes it easy to give a total value of 100%. Sliders perhaps?

2 Answers 2


I like the idea of sliders from Franchesca. One slightly different approach would be using connected sliders like used by Humblebundle. It was totally usable for me from the very first moment:

connected sliders from humblebundle

Connected means, that if you change the value on one slide (per slider or textbox) all other values are getting equally changed as well.


Have you seen the slider controls often used in graphics packages for creating colour gradients? enter image description here

You could have a single slider control where you can drag and drop currencies onto the slide bar (like the very bottom bar on the graphic). The slider control represents 100%, so a single currency dropped onto it has no moveable slider boundary. Adding a 2nd currency will add one sliding boundary, adding a 3rd will add 2 etc. as per the below diagram.

enter image description here

One thing to be careful of however. Finance users (especially traders) have a tendancy to prefer keyboard navigation when maintaining data. Depending on the use case you may need to keep this option available. The most important thing is to check with your target users to see how they work, and get their feedback before implementing anything.

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.