UIImage has unwanted gradient when stretched in a UISlider

Question

I have created a two 7x30 image, one with a 3 pixel black border and a transparent middle, the other with a white middle (min.png and max.png).

I am using these two images as the Track Images for a UISlider like this:

[self.progressBar setMinimumTrackImage:[[UIImage imageNamed:@"min"] stretchableImageWithLeftCapWidth:3 topCapHeight:3]
                                  forState:UIControlStateNormal];
[self.progressBar setMaximumTrackImage:[[UIImage imageNamed:@"max"] stretchableImageWithLeftCapWidth:3 topCapHeight:3]
                                  forState:UIControlStateNormal];
[self.progressBar setThumbImage:[[UIImage alloc]init] forState:UIControlStateNormal];

This is created on top of a UIImageView which is animated, but for some reason the stretched "min" and "max" images have a gradient that shows up. In this image the background is a flat red color:

Update: I modified the image to be 9x30, with the same 3px border but a larger 3x24 'hole' in the middle, then made the stretchable image LeftCapWidth 4. This seems to resolve the problem. But why did the 1px strip in the middle of the old image not stretch correctly?