My system measures events for event sets. The activity level for each event set is based on the amount of events in that set. The numbers in the image below illustrate the amount of events needed for each level in every event set. E.g., if the amount of events for set 1 would be 7, the activity level would be Medium. Each set can have different activity level ranges.

enter image description here1

A user can set the activity level ranges manually. And if user makes a change (for example, set the minimum medium in event set 2 from 8 -> 6) the other activity levels needs to be corrected also (maximum in Low needs to change from 7 -> 5).

So my question is: what kind of UI would be an easiest way for user to adjust these activity level ranges? I was thinking that a table where each value is an input field. And when a user adjusts a value, other values are corrected automatically. Example bellow:

enter image description here

However, I am not sure is this an easy to understand solution. Should I use slides instead of a table or perhaps just a form. Any ideas?


Update: The first version looked like this, only the Medium fields were editable. I feel that it might be difficult to understand that you can change other values based on the Medium range only. Not sure..

enter image description here

A new idea: the minimum value in Low is always 1, so would it be better if you could only change the maximum values of Low and Medium?

enter image description here

  • what are the general bounds of the ranges? Can we go into the 100s? And can they start at more than 1 for the lower bound? It looks like it, but just want clarity
    – Mike M
    Jun 10, 2019 at 15:49

1 Answer 1


Try limiting the number of inputs, and give users indications when the bounds update.

Since the value range needs to be continuous, can you reduce the number of inputs, so users can see when they update the upper bounds on Low and Medium the corresponding lower bounds update?

This way you go from 5 inputs to 3, and the updates could even have a little animate on tab out to show the corresponding next bound enumerate. Something very subtle.

NOTE (update): in response to jakopo's answer to my question that the minimum bound is 1, you now have 2 inputs, as per his updated post.

enter image description here

Using sliders

Sliders tend to be tricky, and have their own set of usability problems.

Nielsen Norman Group: Slider Design: Rules of Thumb

Selecting a precise value using a slider is a difficult task requiring good motor skills, even if the slider is well designed. If picking an exact value is important to the goal of the interface, choose an alternate UI element.

  • Like the idea of reducing the number of inputs!
    – Mo'ath
    Jun 10, 2019 at 16:57
  • Thank you for your answer. Actually, the first version was something like that but the Medium range was only editable. I added an image to my original post. You are right that there can be no gaps. I also added an idea of where only the max values of Low and Medium are editable
    – jakapo
    Jun 10, 2019 at 17:07
  • 2
    ah yes. I was wondering if your lower bounds of Low has to start at 1. If it does, now you're down to 2 inputs. I don't see a need for sliders for your UI.
    – Mike M
    Jun 10, 2019 at 17:26

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.