iOS - custom image for UISlider

Question

I want to use an image for the UISlider track. I don't want one color on the left of the thumb, and another color on the right. I just want one static image across the whole track. Possible?

score 16 · Accepted Answer · edited May 23 '17 at 11:53

16

For setting the image to your slider you can use the setMinimumTrackImage, setMaximumTrackImage methods. For your requirement set both to same image.

iOS 5 and Below

UIImage *sliderTrackImage = [[UIImage imageNamed: @"Slider.png"] stretchableImageWithLeftCapWidth: 7 topCapHeight: 0];

[mySlider setMinimumTrackImage: sliderTrackImage forState: UIControlStateNormal];
[mySlider setMaximumTrackImage: sliderTrackImage forState: UIControlStateNormal];

iOS 5+

UIImage *sliderTrackImage = [[UIImage imageNamed:@"Slider.png"] resizableImageWithCapInsets:UIEdgeInsetsMake(0, 7, 0, 0)];

[mySlider setMinimumTrackImage: sliderTrackImage forState: UIControlStateNormal];
[mySlider setMaximumTrackImage: sliderTrackImage forState: UIControlStateNormal];

For more please check these links:

edited May 23 '17 at 11:53

Community

1
1

answered Jul 05 '12 at 17:28

Midhun MP

103,496
31
153
200

Thanks. This works. I didn't need it to be stretchable so I just used imageNamed. – soleil Jul 05 '12 at 17:57
1

`stretchableImageWithLeftCapWidth:topCapHeight:` is deprecated. Replace it with `resizableImageWithCapInsets:UIEdgeInsetsMake(0, 7, 0, 7) resizingMode:UIImageResizingModeStretch`. – Iulian Onofrei Sep 29 '15 at 15:45
@IulianOnofrei: Thanks for notifying, I've edited my answer. – Midhun MP Oct 07 '15 at 07:04
what should be the size of the image? – nr5 Jul 10 '17 at 10:18

score 5 · Answer 2 · answered Nov 22 '13 at 06:04

5

[[UISlider appearance] setThumbImage:[UIImage imageNamed:@"ball.png"] forState:UIControlStateNormal];
[slider setMinimumTrackImage:[[UIImage imageNamed:@"volume_slider_oragne.png"] stretchableImageWithLeftCapWidth:0.3 topCapHeight:0.0] forState:UIControlStateNormal];
[slider setMaximumTrackImage:[[UIImage imageNamed:@"volume_strap_gry.png"] stretchableImageWithLeftCapWidth:0.3 topCapHeight:0.0] forState:UIControlStateNormal];

answered Nov 22 '13 at 06:04

Darshit Shah

2,366
26
33

3

[[UISlider appearance] setThumbImage:[UIImage imageNamed:@"ball.png"] forState:UIControlStateHighlighted]; as well to avoid the thumb from returning to its original image while sliding. – M.Othman Mar 12 '15 at 13:27

score 0 · Answer 3 · answered Jul 05 '12 at 17:28

0

Just set both sides to the same image. You might want to make two separate images with the same color/pattern if you want the rounded corners on the ends.

answered Jul 05 '12 at 17:28

Eric Welander

560
4
11

iOS - custom image for UISlider

3 Answers3

Linked