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:

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

How do I change the background image of the slider?

Mauricio

post your code then can we are able to understand – Faugh

Answer 1

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];

Celik

you don't need an explicit transparent image named clearSliderBar, you can just do [[UIImage alloc] init]; and the image will be transparent. – Littleton

Thanks for info @KaanDedeoglu . I will update my code too :-) – Celik

Answer 2

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)

Latoshalatouche

Answer 3

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];

Unutterable

Answer 4

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

Excrement