I own a responsive web application.

I want to let user filter results (supposing a page listing some data) based on his geolocation and a chosen limit.

For instance, Bob wants to see all meetings that are within 10km only.

What would be an appropriate component, especially on mobile device?

I found this (the first item), but it could be touchy to represent a large slider on narrow mobile device, and not easy to be accurate for people having large fingers.

What do you think?


You can use a numeric stepper. The user may enter the value with the keyboard, or use the up/down arrows. The default value should be empty (no distance filter).

EDIT : See comment by @FodderZone


download bmml source – Wireframes created with Balsamiq Mockups

  • 1
    I thought about that, nice to have a confirmation :) Thanks :) – Mik378 Sep 1 '14 at 13:10
  • 1
    When the field is empty the distance filter is disabled. The user can delete the field value any time. The default value will be empty. – DesignerAnalyst Sep 1 '14 at 13:20
  • 1
    It depends from how much experience your users have with filters. If they have some basic experience, in my opinion you do not need to add any addtional elements. But if your users are novice, you need additional elements to make it clear, like the checkbox or a label next to the numeric stepper "Within any distance" displayed ONLY when the the field is empty. – DesignerAnalyst Sep 1 '14 at 13:32
  • 1
    Understood :) Actually, targeted users are .. everybody since the app will be public. – Mik378 Sep 1 '14 at 13:33
  • 3
    Do your users care about the difference between 10 KM and 11 KM? If not, I would suggest a drop down list of options like "1 KM", "5 KM", "10 KM", "25 KM". My experience is that counter fields like you show above are less intuitive. – FodderZone Sep 1 '14 at 13:43

I think a slider that has stepped values should work reasonably well on a mobile device too, especially if you don't have to be very precise with the distance. The end points can be a minimum distance, and the maximal value can be everywhere.

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.