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?


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, privacy policy and cookie policy

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