I have a idea to make an "open/close interval selector" to select the value range such as "[0,24)"or "[-1,1]" in mathematics.
[0,24) means "Greater than or equal to 0, less than 24"
[-1,1] means "Greater than or equal to -1, less than or equal to 1"

This control will be use in my project for setting some options value range.
This is the first edition of my control:


download bmml source – Wireframes created with Balsamiq Mockups

Yes, looks terrible. Any better idea?

The second edition:


It looks great. Thank you @mentallurg.

  • What is the possible range of numbers? Are they all integers, measurements?
    – Crissov
    Jan 3, 2021 at 17:13

1 Answer 1


It depends on the purpose.

If you are going to use it for searching of products by price, then open/closed will over-complicate the UI. I'd suggest not to use it all. Instead, use just two fields and consider them both as closed interval ends.

If you are going to use it for some application where formal mathematical logic is important (e.g. mathematics, physics), then I'd suggest following:

  • Put all controls into a single line.
  • Display also the variable or parameter that your are going to control. Even if it is not editable, it will be easier to understand the meaning.
  • Remove spinner.

So it would look like

0 <= X < 24

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.