In the image below, you can see below the blue line 4 options. I am creating a step by step wizard where I try to minimize the amount of user typing required by adding in clickable buttons to collect preset data. In this step, I want to get a range from users. The most common ones our business deals with are the 3 you see. We have about 20 other ranges that we offer, however it would be way too much to put on the page, so we elected to add an "other" option. If they click on other, the contents above the blue line would then appear instead of the contents on the bottom of the line, allowing the user to enter their own range.

The question we are debating internally is, 1, should we just start with the enter your own range, 2, just make the "other" be 100+ (which I don't like because their custom range may be 40-50) or change the label on "other" to be something more descriptive like "custom range"

Additionally, not sure if I should go for a thicker stroke, or a different stroke color/font weight for the unselected boxes. Selected boxes would be red with white bold text.

enter image description here

1 Answer 1


Personal opinion, but I agree that Other or Custom is preferable to 100+.

This may be a case where you can keep the default ranges and use something like a range slider for your custom input.

Here the user clicks/presses on the 1 - 25 range, then on the Other button which animates a change in the control. The range box on the left could accept keyboard input if you want.

view full size

  • I appreciate the response, I had not considered a slider yet, solid alternative for sure
    – gxrobb
    Mar 18, 2021 at 18:23

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.