Double Slider UIControl for the iOS

One component I’ve been missing for a long time from the iOS is a slider where I can select a range of values instead of just one. Turns out such a component is not that hard to make.

The DoubleSlider (maybe it should be called a RangeSlider) is a UIControl subclass just like a UISlider, it only allows the user to select a range of values instead of only one, using two handles, one for the minimum and one for the maximum value.

29 Responses

It’s free to use in any project, commercial too. Any contribution to the project in GitHub is appreciated (you will have to improve it a bit if you want to use it in a commercial job, at least latch fingers so that you dont have to keep them over the handles). Of course any link or mention is appreciated too but not mandatory. Let me know how you use it; I’m glad you found it useful, I might improve it after the holidays.

Thanks for getting me started with this code! It’s been most helpful. I do have one question – I am revising it a bit to handle multiple instances. It this case, there are 4 dual sliders, but they are appearing on top of each other – even though I am setting different frames. Is there someplace the original frame is being reset?

I suggest small fix. Now when you move thumb too fast (it’s in fact, easy to do) it stops moving, even when your finger is still moving. You could turn on some BOOL variable (one for every thumb) in beginTrackingWithTouch, and turn it off in endTrackingWithTouch. Now, in continueTrackingWithTouch you could check if frame contains touch point OR if the point is already moving. In that case the move will be possible even if your finger is no longer exactly on the thumb, but it’s still moving. This behavior will be much more similar to the standard UISlider.

Hey, it’s the finger latching issue mentioned in the post and the comments. It’s something I’m going to fix soon since people have shown interest. Check back soon for an update or follow the github repo.

One more issue thats being noticed of this custom Double slider is that it never shows the minimum value . For example, if the min and max value is in between 20.0 and 80.0, it will always 20.3 as starting if u move the minimum thumb view to start of the slider.

When the handles are moved to the min- and max-values, the only respond partly.
Their frame’s origin x is set to -15 for the min and max + 15 for the max.
Thus, initially, only half of the handle is within the control’s touch-area and it’s hard to grab.

Its awesome. Thanks for the great tutorial. This is very useful to me. But Small note in my case I want images for tracking area , I mean with in min and max handler and out side also instead of blue and dark colors. So I done some small changes in the existing code. Once again thank you very much.

Hi, i’m using this project and i’d like to ask how you can handle to reset the slider to its min and max value without adjusting the slider manually. i can’t use slider.minvalue = 0; as well. please help me on this. thanks! 🙂

Well, it’s been over three years that I wrote this piece of code… but I had a look! Doesn’t the method “- (void) moveSlidersToPosition:(NSNumber *)leftSlider:(NSNumber *)rightSlider animated:(BOOL)animated;” work for you? It should work and even allow you to animate them.