UISlider set Image with corners

Question

Here I need to rounded uslider but when i try to set images it shows rectangled image,

I need like this Image

Here My coding

UIImage *volumeBackgroundImage = [[UIImage imageNamed:@"l2.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(9, 5, 7, 5)];
    [self.audioSlider setMinimumTrackImage:[[UIImage imageNamed:@"l1.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(9, 5, 7, 5)]
                               forState:UIControlStateNormal];
    [self.audioSlider setMaximumTrackImage:volumeBackgroundImage
                               forState:UIControlStateNormal];
    [self.audioSlider setThumbImage:[UIImage imageNamed:@"sliderhandle.png"]
                        forState:UIControlStateNormal];

Could anybody help to achieve this

Answer 1

You need to have images with round corners. For example:

Then simply use this image like this:

[_slider setMinimumTrackImage:[[UIImage imageNamed:@"black_dot.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12)]
    forState:UIControlStateNormal];

[_slider setMaximumTrackImage:[[UIImage imageNamed:@"blue_dot.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(12, 12, 12, 12) 
    forState:UIControlStateNormal];

(where black_dot.png is example image, and blue_dot.png would be the same but in blue color)

(If image is pixelated - then You need to get this image twice as big - retina image - [email protected])

(Or in case You actually need smaller image than given example, then just rename this image as [email protected], and instead of : UIEdgeInsetsMake(12, 12, 12, 12) use: UIEdgeInsetsMake(6, 6, 6, 6))

See more info here:https://stackoverflow.com/a/8656216/894671

Answer 2

You can try to draw the image of the size required, rather than adding a image which might cause distortion.

Slider distortion solution