What is the best interaction pattern for entering a range on a mobile phone?

Question

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}

Answer 1

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"

Answer 2

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!

Answer 3

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.