How to increase the size of the max track of a UISlider?

Question

I would like to add a UISlider with a size different from min to max.
Here is an example of what I need :

I've tried to play with some methods like :

- (CGRect)minimumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)maximumValueImageRectForBounds:(CGRect)bounds;
- (CGRect)trackRectForBounds:(CGRect)bounds;
- (CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value;

But I can't manage to get it work...
Any suggestion or maybe link on how do you achieve that ?

Answer 1

You need to subclass UISlider. If you are creating UISlider at run time you should use initWithFrame otherwise initWithCoder .

@implementation slider

- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
    }
    return self;
}

- (instancetype)initWithCoder:(NSCoder *)coder
{
    self = [super initWithCoder:coder];
    if (self) {
        // At certain point images swap, that is why you need images fit to your UISlider size.
        UIImage *sliderLeftImg = [[UIImage imageNamed: @"slider2"] stretchableImageWithLeftCapWidth: 10 topCapHeight: 0];
        UIImage *sliderRightImg = [[UIImage imageNamed: @"slider"] stretchableImageWithLeftCapWidth: 10 topCapHeight: 0];
        [self setMinimumTrackImage: sliderLeftImg forState: UIControlStateNormal];
        [self setMaximumTrackImage: sliderRightImg forState: UIControlStateNormal];

    }
    return self;
}

/*
// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    // Drawing code
}
*/

@end

The sample images I draw loops sloppy, you need better ones.

UISlider Class Reference

Final Result: