Customize UISLider to change the color after the thumb is dragged

Question

I have this type of a custom UISlider I have implemented that looks like this:

The peculiarity of it is that you can't drag it to the left of it's initial thumb position.

But when you drag it to the right it should change the color of the path like this leaving the color on the left as it was and colouring the path it has travelled:

I am only aware of the two properties of UISlider - MinimumTrackImage and MaximumTrackImage that are responsible for the right and the left side of the handle.

How do I implement this strange behaviour? Any ideas? Thanks!

Answer 1

I was able to implement this with the following code. The tricky part to figure out was how to set the initial image based on the starting value of the slider. I did that by creating a 4 pixel wide image with the left 2 pixels your starting left color, and the right 2 pixels, the color you want after the drag. Basically, I stretched that image (on left only) to fill an image view, then got that image with UIGraphicsGetImageFromCurrentImageContext(). I then create another stretchable image with that image with stretching only on the right.

#import "ViewController.h"
#import <QuartzCore/QuartzCore.h>

@interface ViewController ()
@property (weak,nonatomic) IBOutlet UISlider *slider;
@property (nonatomic) CGFloat previousValue;
@end

@implementation ViewController

- (void)viewDidAppear:(BOOL)animated {

    [super viewDidAppear:animated];
    self.previousValue = self.slider.value;
    if (self.slider.value > .01) {
        UIImage *newImage = [self imageStretchedOnLeft];
        UIImage *rightStretchImage = [newImage resizableImageWithCapInsets:UIEdgeInsetsMake(0, newImage.size.width -2, 0, 0) resizingMode:UIImageResizingModeStretch];
        [self.slider setMinimumTrackImage:rightStretchImage forState:UIControlStateNormal];
    }else{
        [self.slider setMinimumTrackImage:[UIImage imageNamed:@"OneColor.png"] forState:UIControlStateNormal];
    }

}

-(IBAction)sliderMoved:(UISlider *)slider {
    if (slider.value < self.previousValue) {
        slider.value = self.previousValue;
    }
    self.previousValue = slider.value;
}

- (UIImage *)imageStretchedOnLeft {
    UIImage *image = [UIImage imageNamed:@"TwoColor.png"]; // 4 pixel wide 1 pixel high image. Left 2 pixels are original track color, right two are new drag color
    UIImage *cappedImage = [image resizableImageWithCapInsets:UIEdgeInsetsMake(0, 0, 0, 2)];

    UIImageView *iv = [[UIImageView alloc] initWithFrame:CGRectMake(0, 0, self.slider.frame.size.width * (self.slider.value/self.slider.maximumValue), self.slider.frame.size.height)];
    iv.image = cappedImage;
    [self.view insertSubview:iv belowSubview:self.view];

    UIGraphicsBeginImageContextWithOptions(iv.frame.size, YES, [[UIScreen mainScreen] scale]);
    [iv.layer renderInContext:UIGraphicsGetCurrentContext()];
    UIImage * img = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    [iv removeFromSuperview];

    return img;
}

I get a graphics context error if the slider's value is 0, so the if statement in the viewDidAppear method uses a different one color image if that value is less that .01.

Answer 2

You can use this

//code for slider
UIImage *minImage = [[UIImage imageNamed:@"slider_minimum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *maxImage = [[UIImage imageNamed:@"slider_maximum.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 5, 0, 0)];
UIImage *thumbImage = [UIImage imageNamed:@"thumb.png"];

[[UISlider appearance] setMaximumTrackImage:maxImage forState:UIControlStateNormal];
[[UISlider appearance] setMinimumTrackImage:minImage forState:UIControlStateNormal];
[[UISlider appearance] setThumbImage:thumbImage forState:UIControlStateNormal];  

Here is nice tutorial of raywenderlich