Age range slider for filtering

Question

I'm building a dating website and within the search page there is a filtering section and of course one of the filters will be for age range. I am wondering what is the best way to obtain this information? My current prototype uses a slider, as illustrated below:

This however gets a bit tricky when the age range is small, as illustrated below:

My questions are as follows:

1. Firstly, is a slider a suitable control for this purpose? Ideally I prefer to have a slider, as I think it gives a more modern appearance. In terms of usability, I don't think it's any more difficult than a dropdown and I think most users are familiar with sliders nowadays.
2. If I was to keep the slider, how can I avoid the problem in the second image? I was thinking instead of having every value from 18-99, have larger increments, so for example after the age of 40, increment by 5, e.g: 45, 50, 55, 60... If there are less values then this should allow more space between each value.

Answer 1

Don't forget to consider mobile touchscreen and users with disabilities.

To use a slider have the movement dynamic, and have the displayed numbers clickable so exact values can be entered in each box to correct the choice made with the slider tool.

A 'dynamic slider' would change the number slightly for larger movements at first - and the right side ball would roll up by 5's if held midway and by 10's if pressed and held to the extreme right.

Letting go would 'generically center' the bar so each ball could easily be clicked and slid left or right any number of times to fine tune each number. For example, you chose 24-28 and now they are so close together they can't be readjusted; instead display this:

An additional control could be a centrally located grabber. Once the width of the range is correct one could tap the center of the bar and slide the range up or down without adjusting the endpoints.

See how each ball can be easily accessed on a touchscreen (or with a mouse) and slid left or right to adjust the number. Worry about functionality not getting the length and motion of the slider to scale perfectly with the numbers.

Think about how you would do it with two wheels that you pushed up or down to adjust the lower or upper limits, you don't care about the spacing of the balls you want to move each and get an appropriate movement of the corresponding number.

A "simple slider" is too simplistic and runs into the problem you described. FWIW: Increase the upper range ~40 years to avoid age discrimination.

Answer 2

To answer the first question, you need to design the UI element for input based on the information that you want to capture, so if you want to deal with age range input that are not uniform then it is not something you need to consider (although it could be a problem when it comes to the processing or presentation of information).

Which leads to your second question about the increment size, and this relates to how specific you want the search parameter to be for the user. If the expectation is that they can search for a very specific age range then you need to accommodate it accordingly.

It also seems like if you want to provide flexible search options then the slider alone will not be enough. However, there are sliders that also allow you to input direct values that are updated on the sliders.

This reference explains how precision and control affect the UI element choice/design: https://www.nngroup.com/articles/sliders-knobs/

The two main types covered are:

There are two major types of input controls:

Discrete controls offer a limited number of steps or options available. Examples include on/off switches or checkboxes and radio buttons with a few, preselected options.

Continuous controls allow for a range of inputs, typically between a minimum and maximum value. Sliders or knobs are continuous controls. (Note that, in theory, a continuous parameter can take any possible value within the range.)

Answer 3

You could have disabled checkbox next to the slider that can be activated to create a custom range with the numpad