Double ranged and moveable slider component in iOS

Question

I want to implement a slider-like component like the one at the bottom of this screenshot taken from Roambi. For those who haven't used Roambi, this slider is double ranged, i.e. you can define the ranges from the blue bars at the two ends. And then to indicate which data region you're interested, you move the grey area in between these blue bars to the left/right.

To implement this, two things come to my mind:

1. The left and right blue bars are UIViews. I handle touch events on these views to define the range. The middle area in between these two bars is also a UIView. I handle touch events on this view to move it left/right in order to define the data region.

2. I can implement a double ranged UISlider in order to get the functionality of the blue bars. (I already learned how to do this.) But then I don't know how to move the body of the slider to define the data range. Is this possible?

Also, could there be another way of implementing this?

Answer 1

You might find these projets interesting:

• iosrangeslider
• Wicked iOS Range Slider: Part Two
• CMRangeSlider