Change UIslider thumb image while sliding

Question

I want to change UISlider thumb image during the slide.
Basically to set thumbImage acording to the value.
enter image description here

The idea was to rotate the image according to the value and set it to the thumb.
So I tried to set the thumb image by overriding

-(BOOL)continueTrackingWithTouch:(UITouch *)touch withEvent:(UIEvent *)event
 [self setThumbImage:[self imageRotatedByDegrees:50] forState:UIControlStateHighlighted];

and I also tried the same thing when I added an action to my slider. Unfortunately in both implementations the image simply disappears.
Do you think it possible to achieve in the way I do it? If NO please explain and suggest an alternative way (hopefully not one that will customize and replace the whole slider)
If Yes I will really appreciate code sample. The more close answer that I found here

Thanks a lot.

score 6 · Accepted Answer · edited May 23 '17 at 10:30

I found a mistake in my Code. Apparently I was releasing one of the image before calling CGContextDrawImage. (I still need to improve my GUI appearance to make it more nice, for instance to make the track image as I planed I made the original one transparent and added the as subview the one I need.)

- (id)initWithFrame:(CGRect)frame
 {
self = [super initWithFrame:frame];
if (self) {
    self.thumbImage = [self imageWithImage:[UIImage imageNamed:@"IconForSlider.png"] scaledToSize:CGSizeMake(frame.size.height, frame.size.height)];
    size = self.thumbImage.size.height;
    [self setThumbImage:[self imageRotatedByDegrees:0] forState:UIControlStateNormal];
    [self addTarget:self action:@selector(changeValue) forControlEvents:UIControlEventValueChanged];

}
return self;
}

-(void)changeValue{
NSLog(@"ChangeValue");
[self setThumbImage:(UIImage *)[self imageRotatedByDegrees:(self.value * 100*(10/9))] forState:UIControlStateHighlighted];
[self setThumbImage:(UIImage *)[self imageRotatedByDegrees:(self.value * 100*(10/9))] forState:UIControlStateNormal];
 }

#pragma mark ImageResize
- (UIImage *)imageWithImage:(UIImage *)image scaledToSize:(CGSize)newSize {
UIGraphicsBeginImageContextWithOptions(newSize, NO, 0.0);
[image drawInRect:CGRectMake(0, 0, newSize.width, newSize.height)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
 }

 #pragma mark Rotate

- (UIImage *)imageRotatedByDegrees:(float)degrees
 {
NSLog(@"ImageRotateByDegres");
static float Prc = 0.6;
degrees = (degrees > 90)? 90: degrees;

UIView *rotatedViewBox = [[UIView alloc] initWithFrame:CGRectMake(0,0,size,size)];
CGSize rotatedSize = rotatedViewBox.frame.size;

 // Create the bitmap context

UIGraphicsBeginImageContextWithOptions(rotatedSize , NO, 0.0);
CGContextRef bitmap = UIGraphicsGetCurrentContext();
UIColor *color = [self.colorsArray objectAtIndex:lround(self.value*100)];
[color setFill];
CGContextRef bitmap = UIGraphicsGetCurrentContext();

[[UIColor colorWithRed:((139 + (116/100)*self.value*100)/255.0) green:141/255.0f blue:149/255.0f alpha:1.0f] setFill];
// Move the origin to the middle of the image so we will rotate and scale around the center.
CGContextTranslateCTM(bitmap, rotatedSize.width/2, rotatedSize.height/2);

// Rotate the image context
CGContextRotateCTM(bitmap,DEGREES_TO_RADIANS(degrees));

CGContextClipToMask(bitmap, CGRectMake(-1*size/ 2, -1*size / 2, size, size), [self.thumbImage CGImage]);
CGContextAddRect(bitmap, CGRectMake(-1*size/ 2, -1*size / 2, size, size));
CGContextDrawPath(bitmap,kCGPathFill);
 //Prc and 1.07 are for better view
CGContextDrawImage(bitmap, CGRectMake(-1.07*size/2*Prc, -1*size/2*Prc,size*Prc,size*Prc), [[UIImage imageNamed:@"ActiveIcon.png"]CGImage]);

UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;

 }

with some help from this link I create an array of colours for my slider Get Pixel Color of Uiimage

- (UIColor *)GetColorAtValue:(float)value{

long pixelInfo = (long)floorf(_sliderImage.size.width  * _sliderImage.size.height/2 + _sliderImage.size.width * value) * 4  ;

UInt8 red = data[pixelInfo];         // If you need this info, enable it
UInt8 green = data[(pixelInfo + 1)]; // If you need this info, enable it
UInt8 blue = data[pixelInfo + 2];    // If you need this info, enable it
//UInt8 alpha = data[pixelInfo + 3];     // I need only this info for my maze game
//CFRelease(pixelData);

UIColor* color = [UIColor colorWithRed:red/255.0f green:green/255.0f blue:blue/255.0f alpha:1]; // The pixel color info

return color;

}

enter image description here

Change UIslider thumb image while sliding

1 Answers1