I am working on a feature were you need to distribute the total of the feature value (100%) between 4 factors, I think the best option is the input fields, but I like the visual feedback from the slider, any suggestion?enter image description here

  • 1
    Will you need to support mobile (phone) users? If so, the slider may be less than optimum. OTOH, how about supporting both, so you can drag slider points, or enter numbers in the boxes, then you get best of both, assuming you have sufficient space. Commented Aug 27, 2016 at 18:05
  • 1
    Can you clarify whether each vector is limited to 25%? For example, could a user select 0% for three vectors and 100% for one, or 10% for two vectors, 30% for one and 50% for the other?
    – Monomeeth
    Commented Aug 27, 2016 at 20:41
  • Hi Steve, no I think this is just for desktop right now, well yeah on the slider option you can actually enter values manually on the boxes.
    – VADO
    Commented Sep 9, 2016 at 2:32
  • Hey Monomeeth, there are no limits you can give 100% to one option and 0% to the other 3
    – VADO
    Commented Sep 9, 2016 at 2:33

4 Answers 4


The slider design as shown above could be incredibly confusing from an accessibility standpoint. What if someone could not properly see the colours?

I see 3 slider "handles" but 4 fields. That seems odd, too.

What happens when vector 1 needs to be 25% and vector 2 needs to be 26%? That seems like some very tedious mouse dragging.

Using form fields, you can quickly tab to each one or after a value is filled in, automatically move to next form field.

This is precise work, I think direct number entry is the best choice.

However, if you want something more visual, show a graph or something of how the 4 values are distributed across the 100%; for example, in vector 1, they enter 25%. Draw a graph then that shows the progress left or something.


I think your slider could certainly work, but a) I fully agree with the color accessibility issues, b) make sure that the slider track clearly represents 100% regardless of the position of the handles, and c) you might change a few things around a bit to make the associations clearer:

Slider example updated

Keep the fields and vector names centered (as much as possible) over/under their related segments (they could both be over or both under, whatever), and don't let color confuse the issue. I also wouldn't use any light grays: low-contrast controls are NOT cool, they are just harder for a segment of your customers to use.

Just $0.02.

  • I completely agree with you! A slider implementation is an easy way to make sure that the end user is unable to submit any total value beside 100% and is also a great way to save space! It is both space efficient and more robust against invalid inputs! Which should result in much happier clients who didn't have to do math themselves. (The less they have to do, the happier they are) ;) Commented Aug 29, 2016 at 6:33
  • I consider this option but the issue is that you can give to one vector 100% and 0% to the other 3, that reduce the space and could be hard to arrange, thats why I added the static boxes below the handler, but yeah depend on colors is not the best.
    – VADO
    Commented Sep 9, 2016 at 2:38
  • @VADO is that a likely circumstance? You could certainly just have the other labels/fields "cluster" at the other end, not appearing in literally the 0% spot, but in the rough position, and with the numbers doing the work. If this IS likely to be common, the slider might not be the best control for you; fields with validation may be easier for users.
    – Mattynabib
    Commented Sep 9, 2016 at 10:58

Using bar-chart that auto-completes to 100 can work better. Connecting them on a linear scale is more complex action than deciding on each variables. when you increase one, automatically decrease the neighborhood variable.

You can add unassigned percentage bar, to make things a bit clearer...


I think that you're spot on with the form fields being the best way to get user entered data, it's not as difficult as trying to move around handles on a bar; I'm thinking Fitts' law. No reason you couldn't have both though.

As for displaying the information, a bar graph works well, or a 'donut' graph might also work. I like this idea as it shows a complete circle so you can easily see it total up to 100%.

Out of interest, do you have a default factor that always fills up the rest of the percentage? Like if I put 20%, 20%, and 15% - will say factor 4 automatically fill in to 45%? I ask because a linear slider might not represent that there is a percentage missing. If I put 20%, 20%, 20% and 20%, I might not realise that the bar is only 80% long, as I don't know what 100% looks like. If you used a donut graph you would have an incomplete circle indicating the totals don't add to 100.

If you wanted to stick to a linear slider/bar, I would just recommend using and 'end point' indicator, so you could see if the 100% total wasn't reached, and obviously use something other than just color to distiguish between the factors.

Example 'donut' or pie chart:

enter image description here

  • I would expect that the linear slider would always represent 100%... that would solve the issue.
    – Mattynabib
    Commented Aug 29, 2016 at 3:30

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.