Changing the background image of a UISlider?

Question

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

I tried the method setBackgroundImage, but it looks like a slider frame.

How to change the background image of a slider?

Answer 1

1. Add an image with the same size below your slider. Set a multi-color image for it.

2. Use a transparent image both to the left and to the right of the slider image.

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

Answer 2

Quick Swift 3 translates the accepted answer. Be sure to add your custom colors / views 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)

Answer 3

Have you tried the accepted answer here ? This 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];

Answer 4

To set the image on the slider, you can use the setMinimumTrackImage, setMaximumTrackImage methods. For your requirement, set both of the same images.

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

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

For more details see the following links:

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

Custom slider

Other user code

Custom with Popover Slider display display

Image slider