I need a good approach for the user to be able to select a lot of options. The values are going to be numbers only. User should be able to select from example numbers between 1000 and 1050, and 1220 - 1300.

What is the reasonable solution for this? I was thinking in the beginning the multi-selection dropdown, something like this (where you can also select with shift+click):

enter image description here

But then again I do not think this will work out as there can be hundreds or even thousands numbers that user needs to select.

Should I just fall back the the basic input field where user himself specifies the ranges he wants and separates them with comma or similar, for example like:

1000-1050, 1220-1300

2 Answers 2


You may use a data grid with two columns, From and To. The user may enter as many rows as required.


download bmml source – Wireframes created with Balsamiq Mockups


Personally, I'm a big fan of the KISS method, so I'd go with what you say: specify the range with inputs (not necessarily separated by commas, you could also have rows of from and to inputs, pretty much what DesignerAnalyst suggests, only that using input fields).

However, if you're looking for a visual solution, try something like this:

enter image description here

The image above is taken from https://github.com/atomiomi/jqueryui-slider-prototype/wiki/jQuery-UI-slider , so you might want to take a look to it as well. Just in case, there are other multi-range slider solutions, I just chose this one because the image clearly explains what you need

  • Thanks Devin, really good alternative with the more visual approach, I will keep it in mind. Commented Feb 29, 2016 at 20:54

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.