I need the user to select 3 numbers that add up to 1, let's call them x, y, and z. I could have a slider for x and y. Then z would simply be 1 - x - y. But what if the user slides x to 1 and y to anything above 0? I could popup an error message, but that's not friendly...

I could shorten y's slider depending on what x's slider value is. Is there a better solution for this kind of widget(s)? It might be cool to have a slider with 2 tabs, which would separate the x, y, and z values. But I'm worried that might be confusing, particularly if one of the values is very small or 0?

3 slider widget

Is there a good UI solution?

  • 1
    Does this answer your question? What's the best way to let users adjust values that must sum to a certain number? Commented May 28, 2021 at 6:10
  • @locationunknown that question’s accepted answer is the same thing I came up with! But I’m still not sure this is great given the possibility of zero or close-to-zero values…
    – at.
    Commented May 28, 2021 at 6:14
  • Isn't your problem then more with how to select very small numbers (using a slider) rather than how to select numbers that add up to a certain number? Commented May 28, 2021 at 6:19

1 Answer 1


You can use the slider when ease outwheighs the need for precision or when the values just take up a few steps on the slider. Otherwise just use input fields with some helpful labeling and validation:

Auto-fill in the last empty field:
enter image description here

Editing the value shows the max available:
enter image description here

Exceeding the max available after edit:
enter image description here

If you want to use the slider it just needs clearer handles that can't overlap each other:

enter image description here


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.