CODEWITHSUNDEEP
iphoneuislider
raaz
raaz

Reputation: 12500

How to Customize UISlider?

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..

Upvotes: 1

Views: 7143

Answers (3)

mahboudz
mahboudz

Reputation: 39376

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)

Upvotes: 0

pradeep
pradeep

Reputation: 81

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.

Upvotes: 8

willc2
willc2

Reputation: 39691

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.

Upvotes: 3

Related Questions