We're creating a slider to allow users to select an 'age range'.

The facility is to recruit users based on certain parameters. For example, I want users:

  • Who live in the UK
  • Is female
  • Is aged between 20 -35

The first 'who live in the UK' can be selected using a dropdown. The second 'is female' can be selected by a radio button. What would you recommend to use for 'is aged between'? We were thinking a slider but even then is problematic.

Has anyone got a recommendation / examples of selecting ranges using a slider? Even then, is a slider the most appropriate UI tool to use?

  • age ranges are fixed? – Alejandro Veltri Jun 12 '15 at 16:05
  • sounds like age ranges are user selectable based on DLM's comment on philip's answer – nightning Jun 12 '15 at 19:02
  • Exactly @nightning - imagine it as a price range then... or something. (but it is age ranges) – DLM Jun 12 '15 at 19:13

I would recommend two spinners with "From" and "To" labels (or "between"/"and")- this allows for good keyboard control, accessibility, tabbing/form navigation, but also preserves the ability for the user to enter arbitrary values unlike a dropdown:


download bmml source – Wireframes created with Balsamiq Mockups

  • Agree. This is the fastest and easiest way of providing a number range assuming the number range is large. e.g. selecting from a full range from 1 - 99 vs seleting a range between 1-10. Optionally, you can open this up to allow for non-whole number inputs. (If this is a thing for your age range) Something a slider will have difficulty accommodating. – nightning Jun 12 '15 at 20:18

How about a slider like this using arrows for the age range.

enter image description here


Sliders aren't as intuitive or widely used as dropdowns. I recommend using a dropdown. As you know what your age range is, you can explicitly state it like this.

  • This is not useful for ages between say 13 and 55 which is possible – DLM Jun 12 '15 at 17:47

Well, you can use http://vanderlee.github.io/limitslider/ or https://api.jquerymobile.com/rangeslider/ that will provide the exact feature you're looking for. Plus, if you take a look to the second link, you'll see the select boxes at beginning and end of the slider, which leads to this: are you looking to use a slider for aesthetics or usability. If you want aesthetics, then I agree a slider can add a playful and interesting element to your layout. However, let's get back to the second link:

[start value][--------slider--------][end value]

semantically speaking, since we have the values at beginning and end you could easily translate the slider element to the word to. So we can add a helper label (from) and now we have

from [start value] to [end value]

or simply put:


download bmml source – Wireframes created with Balsamiq Mockups

and there you go: frictionless form elements that will also ease your filtering process since now you have a single value instead of a range value. What I mean, now you can accurately filter results instead of getting an undetermined range. We could both agree that 16 years old is not the same as 50 years old! Take a look below:

enter image description here

As you can see, filtering range slider data on such sensitive variables like age could be extremely problematic, so it's better to have specific values even if you don't perceive the need now (who knows about the future?).

And if you need the ranges you could always combine the from and to fields easily if needed

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.