I want to implement a slider-like component, such as the one at the bottom of the screenshot taken from Roambi. For those who have not used Roambi, this slider has a dual range, i.e. You can define ranges from blue stripes at two ends. And then, to indicate which region of data you are interested in, you move the gray space between these blue stripes left / right.

To realize this, two things come to my mind:
Left and right blue stripes are UIViews. I handle touch events on these views to determine the range. The average area between the two lanes is also UIView. I handle touch events on this view to move it left / right to determine the data area.
I can implement a dual-range UISlider to get the blue strip functionality. (I already learned how to do this.) But then I do not know how to move the body of the slider to determine the range of data. Is it possible?
Also, could there be another way to implement this?
source share