3

My team is currently planning a map-centric web app with several slider controls for filtering results. While there seem to be techniques emerging for coding sliders to respond to touch instead of moving the screen (example: http://www.quirksmode.org/m/tests/drag.html), I'd like to explore alternative devices.

Right now we're planning a time slider to adjust values from 5 to 60 minutes and a score slider that lets you set two points on a range from 1-100, so 60-90 vs. a single point. (example: http://jqueryui.com/demos/slider/range.html)

Our goal is to provide a site that works across all major devices without sniffing for individual variants.

What alternative controls are people using to accommodate iPads or what are some examples of regular web apps that have range sliders that perform well on the iPad?

Improve this question

1 Answer 1

Reset to default
2

While this example just shows setting times, it might work in your case. The screenshot is from Boomerang's mobile web app (in iOS Safari) and it duplicates the functionality of the Apple Clock app on the iPhone. The Clock app let's you set an alarm time and a timer.

Boomerang:

Apple Clock App:

In your case, I think it could work something like this:

  • [Rotate from 5 to 60 minutes] minutes
  • From [Rotate for first 1-100 number] to [Rotate for second 1-100 number] (after selection of the first number, you could automatically move the second number to at least one above it)
Improve this answer
1
  • Thanks Drew, if we end up providing responsive controls for specific platforms we may go in this direction. I'm still holding out hope that there's something we can do that will work well in regular browsers / os combos AND on iDevices.
    – mahalie
    Aug 31, 2011 at 19:50

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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