Custom UISlider images not working quite right

Question

With this code:

UISlider *slider = [[UISlider alloc]initWithFrame:sliderFrame];
    [slider setThumbImage:[UIImage imageNamed:@"sliderThumb"] forState:UIControlStateNormal];
    UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"sliderMin"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
    UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"sliderMax"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
    [slider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
    [slider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];

sliderMin and sliderMax images are both 210x34 (same size as the slider frame). sliderMin is blue and sliderMax is red. When the slider is all the way to the left, I correctly see the red bar. However, after sliding the thumb a few pixels to the right, the entire bar turns blue (the sliderMin image). Obviously I should only see the blue bar on the left of the slider. What am I doing wrong?

Answer 1

First off, you are using deprecated APIs. Unless you need to support iOS 4.3 (why?), you should use resizableImageWithCapInsets:resizingMode: instead of stretchableImageWithLeftCapWidth:topCapHeight:.

UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"sliderMin"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 9, 0, 9)];
UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"sliderMax"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 9, 0, 9)];

Now, given this, your image size is incorrect. When making a resizable image, the image should have whatever fixed ends you need and then 1 pixel in the middle that will be tiled to fill in the rest. So your slider images should be 19 pixels wide (not 210). The retina version should be 38 pixels wide (18 on each end being fixed with 2 pixels in the middle that will be tiled).