I am working on a UI for an A/B testing web-app. One of the features is traffic allocation, where you can set the percentage of the visitors that will see every variation of the test. For example, 20% will see version A, 30% will see version 2 and 50% - version C. What are good example of tackling this feature? I want people to easily reach exactly 100% and not think as less as possible if the value they gave each variation is getting them exactly to 100%...

  • The simpliest way is to use two inputs for A and B versions and auto-calculated non-editable field for C version. Standard HTML inputs and a little javascript. Aug 25, 2013 at 16:30
  • Agreed with Alexey. apart from you can also have some presets (20-20-60, 30-30-40 etc...)
    – Awesh
    Aug 27, 2013 at 11:08

2 Answers 2


I like Alexey's solution.

Alternatively to humble bundle sliders, you can implement multiple handlers in same slider.

Some sample http://jsfiddle.net/q5WEe/1/


You could use a series of sliders, where moving one automatically adjusts the others so that they add up to a total of 100%. This has been implemented well on the Humble Bundle donation page:

Humble Bundle donation allocation sliders

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.