Good alternative to a slider for a long list of numeric values

Question

I want to give the user the option to select a numeric value which falls in a range (0-1000), where most multiples of 5 are acceptable.

Usually, for this kind of thing, a slider would be perfect - just implement it in a way where the min is 0 and the max is 1000, and it has a step/snapping behavior of say five: 0,5,10,15,20,25,30,35,40,45,50, etc.

However, I have an issue this time, in which the allowable values do not have a consistent step. The step is typically five, but at 15, 40 and 55 the step is ten: 0,5,10,15,25,30,35,40,50,55,65, etc.

Due to a technical reason, I can't use the slider component I have for this, because it requires the step to be consistent.

Is there some other user-friendly way I could allow the user to easily select a value? There are too many allowable values for it to be practical in a dropdown, and a simple input field doesn't really work well when there are a set list of allowed values.

EDIT: As a lot of people are curious as to the context, this is for an ISP ordering portal. Users need to be able to change the bandwidth/speed of their device in Mbps; however, as per the product design, certain particular speeds are not currently being offered by the business (we explain this to the user on the UI).

Answer 1

How about a combination of a slider and a spinner (number stepper)?

How does this work? I am glad you asked...

Your list of values is effectively an array. So rather than the slider having a list of values, it just works on the indices of the array. So if you have 10 values in array, then slider handles values 0-9. This solves your technical issue because the steps are now consistent (1 step).

When the user updates the slider, this will update the number spinner by setting it with the value that matches the index in the array. For example, if the slider is set to "4", then the spinner will be set to "25" as this is the value in the array at the 4th index (0 based).

The number spinner should be implemented to only allow the valid numbers in your array. When the spinner is updated, then the slider value should also be changed to reflect.

I think this approach gives the user an easy way to select valid values. The slider allows for quick selection, and the spinner allows for "fine tuning" if the slider becomes too sensitive (lots of values).

---

I should also point out one important thing... the numbers you allow seem quite random, at least from the limited information you have provided. I would suggest you review your design to ensure it is clear why some values are not allowed. This will largely depend on your context around the feature, so it isn't something I can advise on, just try to make sure the user understands the reasons for the seemingly random numbers.

Answer 2

As others have noted, we don't know what the actual use case is here. The OP has asked an isolated question out of context of the environment in which it's intended for use, and that's absolutely the wrong way to design an interaction. I highly suspect that this is an X-Y problem in that the question has been posed to solve a secondary problem Y, which is obscuring the real problem X.

We don't have details of whether the data is real or an example. The scenario sounds unusual and probably specific to a particular application. We don't know how sparse or unevenly distributed the data is.

Sliders are notoriously hard to use for accurate number selection, let alone if the mapping from position to number is not linear.

For unevenly distributed semi-sparse data, one alternative is to use a nested or grouped dropdown that splits the possible options into roughly equal ranges for a higher order and lower order. This might be analogous to the way you'd split a long list of alphabetically sorted words into those beginning A to D, E - K, L - R, S - Z, or similar.

In case it's at all relevant, this arrangement also helps the user to see an overview of the available data (or gaps in the data) around the value, something you don't get if you use a slider.

Depending on the sparseness, other ideas might include a bingo-card type panel, but without more information it's all just speculation...

Answer 3

How about a slider connected to a listbox

(please be advised, the following imagery is garish and not for the faint of heart :) )

Or

It allows a coarse selection with a slider and fine-tuning with the listbox.

Bonus points if you make the selected value editable and the change will slide the slider and move to appropriate rounded value in listbox

(In other words the same concept as musefan's answer, but with bells and whistles)

---

SLIDER WITH CONTINUOUS VALUE RANGE ONLY

If you have a slider that only supports the continuous value range, you can fake this by giving every value in the list an index and selecting this index by the slider.

I.E.:

list of possible values:          [0, 5, 10, 15, 25, 50, ...]
slider sliding through indexes    [0, 1, 2,  3,  4,  5,  ...]

• if the user selects 50, it is the sixth value in the array, the slider's value is set to 5

• if the user writes 12 into the "listbox", the nearest appropriate value is selected (10, which is third value in the array, the slider is set to 2)

• slider is by the user to the .... value 4, 5th value in the listbox (starting from 0) is 25, which is the value selected in listbox

• this way you can have non-continuous value range represented continuously, not by having them be continuous, but by selecting their position in the list.

Answer 4

It is better to go with a simple input field that only accepts numeric values to min and max of 0 and 1000 respectively. i.e Letting the user enter the numbers from the keyboard. Use JavaScript to only allow divisible by 5 numbers. Show proper validation color codes to guide the user.

To make UX better on Mobile and tablet, we can use HTML attributes like inputmode which can show the virtual keyboard with only numbers in it.

Example screenshot:

Example code:

<input 
  type="number"
  inputmode="numeric"
  autocomplete="off"
  max="1000"
  min="0"
/>

Representation in mobile:

Answer 5

I like (and have personally implemented) the type of control described in musefan's answer. Such controls have their upsides and downsides, which need to be carefully considered.

Here is an alternative worth presenting:

Would the user be good with the website matching the nearest acceptable value (rounding up or down, depending on which provides better UX)?

If so, this provides an opportunity for the simplest and most obvious UI for this situation: a basic numeric input field.

The user can then input whatever value they desire, and the site can adjust to an appropriate acceptable value.

Depending on the context, this likely will call for a feedback mechanism to inform the user that their value is being adjusted to the nearest valid value. This can be performed using a dynamic text field adjacent to the input box to inform the user of the actual value to be used. If the typical user is highly experienced and knows all the acceptable values, then a simple dialog box or dynamically appearing area can be used to inform the user that an adjustment to their input will be made. This dialog box or dynamic area can also be used to allow the user to specify if they want to round down or up by using intuitive "Round down" and "Round up" buttons.

One of the beauties of these techniques is that they are very easy and cost-efficient to implement, as they do not require designing and developing a custom control.

Answer 6

For me the combobox is the control for "a set list of allowed values".

Use a combobox that filters the values based on the typed in value in such a way that the nearest values above and below the input are shown.

That way you dont have a bazzilion things in the drop down except when the user wants to.

If you want to you could combine it with a slider to "explore" possible values.

If you really dont want the drop down make it a list that has a search field above.

Answer 7

Just let them type it in and do input validation.

Save yourself a whole lotta headaches.

Answer 8

0 to 1000, use a slider with 1001 values (0-1000).

0 to 1000 in steps of 5: use a slider with 201 steps (0-200), multiply value by 5.

0 to 100 in steps of 5 skipping some values: use a slider with X steps (201 minus number of skipped steps).

if they are random as it looks like, keep a list of the skipped steps [20, 45, 60, ...] and then correct the calculated value by this amount.

Below the slider I would also show a label with the selected value and maybe add two buttons for previous and next value for people who are not able to use the slider fine enough. Those should only move the slider and trigger the value calculation. Do not try to calculate the number yourself or you have double the logic.

Also you can make the value clickable to enter a number directly, but that will add extra logic to check if the number is valid. would skip that in the first iteration and only add if really needed by the customer.

Or you can offer an popup that shows all the values at once, like a calendar picker. Should be okay for 200 different values.

Just out of curiosity, what's the use cases for such a logic?

Answer 9

Don't have random steps missing. Simply show all steps and then validate that its an allowed value and let the user know if its not. This will prevent the user from getting frustrated when they can't select the value they want (which isn't allowed) on the slider.

This is somewhat equivalent to a text area with a min/max text length. You shouldn't prevent the user from entering too many characters. Rather, its better to just let them know that their input is invalid.

Answer 10

Don't use the actual value of the slider as bandwidth, use it as an index into a lookup table of possible bandwidths. Show the user the value from the lookup table, not the actual slider value.

This works well whether you have just 5 options to choose from or 50.

An Alternate Approach

If you do have a lot of bandwidth options to choose from, a slider will be difficult to use as it might take very fine mouse control to navigate options. If this is the case, you might need to step back and look at this from your user's perception of your business offerings.

In your question you say...

this is for an ISP ordering portal. Users need to be able to change the bandwidth/speed of their device in Mbps; however, as per the product design, certain particular speeds are not currently being offered by the business

I'm guessing here, but I imagine you don't have a single package with a ton of different bandwidth options. Instead, you offer your customers different package details for bandwidth options. E.g., "Basic Package", "Medium Package", "Fast Package", "Ultra Fast Package"

But even if if you don't have package options, then give your user a lead-in question at first, such as "Would you like slow, medium, or fast speeds to choose from?"

Either way, their choice helps you bracket the speed range to prompt for, and overall makes for a simpler UX problem. Rather than choosing a bandwidth from every one possible, they only have to choose from the bandwidth options for the given package, which is a smaller selection.