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.
Have a look at a video of how the slider works here.
Get the source code and a sample project on GitHub: https://github.com/doukasd/iOS-Components/tree/master/Controls/DoubleSlider
Feel free to contribute to the project and help improve this control.
Love the slider. Is there a license for reuse commercially?
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.
Hello Dimitris,
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?
found it!
Very good tutorial.
But the thumb in highlight state does not show appropriate image.
Thanks for bringing this to my attention. This control is by no means complete. This issue and the latching of the fingers are the next things I’d like to add to it.
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.
Yes, that is definitely in the to do list. I’ll try to add that soon, it’s the most important fix needed.
Thanks
I updated the component with the functionality you suggested, works pretty well.
Cheers
Hi there, I have implemented this in a iPad app and it does not seem to pickup my finger very well. IS there any optimal settings?
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.
Hello Dimitris,
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.
I’ve updated the GitHub project with that logic, thanks for pointing it out.
Hi Dimitriv,
Thanks for the control. I couldn’t find but do the control have properties that gives you maximum and minimum values of slider?
Yes, you can specify them on instantiation:
- (id) initWithFrame:(CGRect)aFrame minValue:(float)minValue maxValue:(float)maxValue barHeight:(float)height;