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 enter image description here

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

score 5 · Accepted Answer · edited May 23 '17 at 12:08

You need to have images with round corners. For example: enter image description here

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 - black_dot@2x.png)

(Or in case You actually need smaller image than given example, then just rename this image as black_dot@2x.png, and instead of : UIEdgeInsetsMake(12, 12, 12, 12) use: UIEdgeInsetsMake(6, 6, 6, 6))

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

score 1 · Answer 2 · answered Jan 21 '19 at 03:37

1

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

Slider distortion solution

answered Jan 21 '19 at 03:37

Pooja Kamath

1,290
1
10
17

score 0 · Answer 3 · answered Oct 05 '13 at 10:11

0

I think this occurs because the round end is generated by the UISlider natively. It assumes that the thumb image will cover the end at extreme positions so it will not redraw it.

One solution could be to take care of the rounding at the end yourself:

self.audioSlider.layer.cornerRadius = 5.0;

Experiment with this value and it should work.

Alternatively, you could make sure your images have rounded ends.

answered Oct 05 '13 at 10:11

Mundi

79,884
17
117
140

no sir, Its not working still it returns the same result.I s there any solution – dineshprasanna Oct 05 '13 at 10:24
Which solution did you try? Both? – Mundi Oct 05 '13 at 10:33
In first they return same results In Second when i place the rounded edge images its shows as pixalated image – dineshprasanna Oct 05 '13 at 10:43
So it seems it is enough to give the images a higher resolution. – Mundi Oct 05 '13 at 15:15

UISlider set Image with corners

3 Answers3