I have a mobile application where I need to filter a list by a range. (Imagine a dating app where you want to filter people by age). How should one design the range picker?

A person should be able to define a lower boundary (example: from age xx) and a higher boundary (example: up to age XX) but does not have to set both and should also be able to reset it to "nothing".

Both values are integers btw.

I imagine it will be easiest to solve it in with two entry fields and a number entry, but I think I might be missing a better solution.


download bmml source – Wireframes created with Balsamiq Mockups

  • Have you considered a spinner?
    – dnbrv
    Commented Mar 5, 2012 at 16:28
  • I have, though I don't know how android would handle that, if we wanted to do a phone gap app on an HTML basis. And I think spinners are not effective for options that go up to 80 options. If one could create a spinner with two wheels using HTML and phone gap, it might be interesting. Commented Mar 5, 2012 at 16:34

3 Answers 3


Text input on mobile is very "expensive" (physically) and causes friction, and therefore should be avoided if possible.

This is what I suggest:


download bmml source – Wireframes created with Balsamiq Mockups

The age labels at the 2 ends change as the user slides the knobs (put the edge ages on both ends).

Here's an example from the app "Karma"range sliders on Karma

  • 1
    This. Considering you want to use PhoneGap/Android, consider using jquerymobile.com. They have really good/easy to use support for stuff like this.
    – Brad Orego
    Commented Mar 5, 2012 at 20:03

Textboxes are hard to manage for users, but the built in pickers work very well. They are also supported by iPhone, Android and Windows Phone - even if they look different. The slider work well too if the range is low, but supporting age (over 60 steps) on a 3,7'' screen would be difficult to get right. Why not try the pickers?


download bmml source – Wireframes created with Balsamiq Mockups

Good Luck!


Yosef Waysman's answer is a good pattern to use, but keep in mind that it always should be easy to control both elements (also when they are close together). Consider adding 'tabs' on top of the first control element and below the second control element, to separate them when they are close together. Or, alternatively, when they are close and hitting the 'box', always select the 'From'-control first.

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.