Customized UISlider Minimum Track Image smaller than MaximumTrackImage

Question

I am trying to create a UISlider with custom graphics but the issue i am facing is that the slider fill value is bigger in height than slider base value. Please see screen shot for this.

And how it should look like is as seen in picture below,

The code that i am using is pasted below,

[slider setThumbImage:[UIImage imageNamed:@"VolKnob"] forState:UIControlStateNormal];
[slider setMaximumTrackImage:[UIImage imageNamed:@"VolBase"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:[UIImage imageNamed:@"VolFill"] forState:UIControlStateNormal];

Answer 1

You would need to make both images the same height, perhaps you can add transparency to the base or fill value so it appears to be smaller / bigger. I would also play with the CapInset to determine that right values for you. Do some research on the function resizableImageWithCapInsets:UIEdgeInsetsMake.

UIImage* minTrack = [UIImage imageNamed:@"VolFill"];
minTrack = [minTrack resizableImageWithCapInsets:UIEdgeInsetsMake(0, 10, 0, 10)];
[slider setMinimumTrackImage:minTrack forState:UIControlStateNormal];

Good luck.