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.
[...] usual the full code for this is on GitHub in the same repository as DoubleSlider, DialController [...]
[...] Im looking to make a double slider similar to these two projects. http://dev.doukasd.com/2010/08/double-slider/ [...]
[...] iPhone – UIControl custom double slider Im looking to make a double slider similar to these two projects. http://dev.doukasd.com/2010/08/double-slider/ [...]
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;
Thanks for that! Exactly what I was looking for!
I found a small bug and am trying to figure out how to fix that…
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.
Solution for that would be great
Thanks for pointing out, I’ll look to it, though it might take some time. If you manage to fix it you can commit to GitHub.
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.
any idea how to do it in circular form ?
how to add more slider controls in one view and how to make this control aligned