Selecting Multiple Ranges

Question

We have a UI requirement, where users need to be able to create several ranges from 0-1000.

Without overlap (including overlap from other parent records)

So, parent 1, has range 0-10, 20-30, 50-55.

Parent 2 is being created, the values parent 1 has chosen are to be unavailable.

There could be dozens of ranges per parent.

Free-text, though my preferred option, has been shot down.

I don't like a long list of 1000 numbers, where you disable already selected values, and allow them to pick all the values that are allowed. But it's not "range based", so I don't like it.

Ideas?

Answer 1

A parent (or whatever it is) can have a bucket of ranges.

But to make things easier to start a new parent off, you could set a min/max of say 0-80 and have a button 'extract allowable ranges' that adds to the bucket of ranges for this parent in such a way as to automatically eliminate invalid ranges - thus adding 11-19, 31-49, 56-80 to the bucket.

Then you have an interface to the bucket that allows you to remove ranges from the bucket, or to adjust the min/max of a range in the bucket, (eg sliders and/or spinboxes) with an automatic stop where you would enter an invalid area.

This then alllows creating of parent N that is 'everything else' - guaranteed because you set min to 0 and max to 1000 and hit the 'extract allowable ranges' button.

This is merely food for thought, as I would imagine that your requirements are quite specific to your particular context and that there are alternatives or optimisations to this kind of idea that suit your particular workflow in your particular scenario.

Answer 2

I would suggest free text fields for both, but with a specification of whats actually selected.
With 1000 items you should really avoid to use a list.

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 3

We are actually going with a table of numbers, with a responsive layout so it will add/remove more numbers to the row as the page width changes.

With a little javascript, holding select and clicking two numbers will allow you to select all available numbers between the two.

Each number can have three states.

• Available
• Already used by another parent
• Selected for by this parent

By it not being a vertical list (like initially thought), and being a table, we are able to easily show what is available, and what is selected, and ranges are better highlighted than if it's a giant list (with one number per row) that you need to scroll.

Even though, technically, it's still a giant list, with the ability to easily select a range, and view what ranges are selected, it satisfices the main requirements.

Answer 4

I think a table would be the clearest way to present/edit it. The purple cells here show who has what numbers, while the blue columns indicate the numbers are taken and not available. It would take some fancy zooming and scrolling to accommodate 1000 numbers but it could be done.

^{download bmml source – Wireframes created with Balsamiq Mockups}