Search code examples
ioscustomizationuislider

iOS - custom image for UISlider


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?


Solution

  • 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:

    1. User Interface Customisation Tutorial
    2. http://jasonlawton.com/blog/customizing-uislider-in-iphone/
    3. Custom UISlider
    4. Slider image