Changing Background Image of UISlider?

Question

I need to change the background of a UISlider, my goal is to create UISlider as the image below:

UISlider

I tried setBackgroundImage method, but it is like the frame of the slider.

How do I change the background image of the slider?

post your code then can we are able to understand – square Nov 19 '13 at 11:48 — square, Nov 19 '13 at 11:48

score 10 · Accepted Answer · answered Nov 19 '13 at 12:04

10

1. Add image view with same dimension below your slider. Set your multicolor image to it.

2. Use transparent image as left and right of slider image

   UIImage *clearImage = [[UIImage imageNamed:@"clearSliderBar.png"] stretchableImageWithLeftCapWidth:14.0 topCapHeight:0.0];
    [slider setMinimumTrackImage:clearImage forState:UIControlStateNormal];
    [slider setMaximumTrackImage:clearImage forState:UIControlStateNormal];

This is 20x8 sample transparet image for test

answered Nov 19 '13 at 12:04

Aditya Deshmane

4,676
2
29
35

4

you don't need an explicit transparent image named clearSliderBar, you can just do [[UIImage alloc] init]; and the image will be transparent. – Kaan Dedeoglu Nov 19 '13 at 12:12
Thanks for info @KaanDedeoglu . I will update my code too :-) – Aditya Deshmane Nov 19 '13 at 12:23

score 3 · Answer 2 · answered Mar 28 '17 at 19:00

Quick Swift 3 translation of the accepted answer. Remember to add your custom colors/view behind the slider before making the track images transparent.

let slider = UISlider()
let clearImage = UIImage().stretchableImage(withLeftCapWidth: 14, topCapHeight: 0)
slider.setMinimumTrackImage(clearImage, for: .normal)
slider.setMaximumTrackImage(clearImage, for: .normal)

score 0 · Answer 3 · edited May 23 '17 at 12:25

Did you try the accepted answer from here? It does the trick:

UIImage *sliderLeftTrackImage = [[UIImage imageNamed: @"SliderMin.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
UIImage *sliderRightTrackImage = [[UIImage imageNamed: @"SliderMax.png"] stretchableImageWithLeftCapWidth: 9 topCapHeight: 0];
[mySlider setMinimumTrackImage: sliderLeftTrackImage forState: UIControlStateNormal];
[mySlider setMaximumTrackImage: sliderRightTrackImage forState: UIControlStateNormal];

score 0 · Answer 4 · edited May 23 '17 at 11:46

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

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

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

For more please check these links:

http://jasonlawton.com/blog/customizing-uislider-in-iphone/

Custom Slider

Another Custom code

Custom with Popover value display Slider

Slider image

Changing Background Image of UISlider?

4 Answers4