How to Customize UISlider? - iphone

Question

I understand how you can have a minimum track and maximum track image, and how it can be stretchable. However, for my needs, that might not be enough control.
I have a situation where on the left hand side (minimum track) I need to display two different colors, based on data. The left hand side actually represents two pieces of data, but yet there still exists only a single thumb between minimum and maximum.
so how can i do this???
Any sample code??
i actually want like this
photo link
On left hand side it is of grinish color but when it exceeds the thumb image it becomes red..

Answer 1

In your .h file
IBOutlet UISlider *slide;
in your .m file
UIImage *minImage = [UIImage imageNamed:#"unselected.png"];
UIImage *maxImage = [UIImage imageNamed:#"selected.png"];
UIImage *tumbImage= [UIImage imageNamed:#"thumb.png"];
minImage=[minImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
maxImage=[maxImage stretchableImageWithLeftCapWidth:10.0 topCapHeight:0.0];
[slide setMinimumTrackImage:minImage forState:UIControlStateNormal];
unselected.png and selected.png are the images that act as bar and thumb.png which slide over the bar.

Answer 2

Put your image swapping code in your slider value-reading method, which is usually:
-(IBAction)sliderChanged:(id)sender; {}
Swap your custom green image with a custom red image whenever your slider value reaches some predefined value. See example below.
// Switches the -thumbImage between an ivar named highImage and lowImage
// when the slider passes the halfway point
if (sliderValue > 0.5) {
[self updateSliderThumbWithImage:self.highImage];
} else {
[self updateSliderThumbWithImage:self.lowImage];
}
define the slider image update method like this:
-(void)updateSliderThumbWithImage:(UIImage *)image;
{
[self.slider setThumbImage:image forState:UIControlStateNormal];
[self.slider setThumbImage:image forState:UIControlStateHighlighted];
}
// You have to set thumb images for both states
// or your image will vanish when user slides it.
// Not sure if you have to do the same with the track image, though.
Hope this helps somebody.

Answer 3

I'm not sure if I can visualize what you need (any chance you can post a sketch?), but do a search for UISlider and you can find some pretty creative uses. Otherwise you can create your own custom UIControl.
(source: texlege.com)