UISlider distorted rounded corner

Question

I created a UISlider and then setting tint colour for min track like this :

    [slider setMinimumTrackTintColor:[UIColor whiteColor]];

However I end up with distorted rounded corner on the left side like this. What do I do ?

enter image description here

Edit: Here is the code that reproduces the issue :

UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(40, 40, 180, 50)];

[slider setMinimumTrackTintColor:[UIColor whiteColor]];

Have a look at this solution: https://stackoverflow.com/a/65398904/8742572 — FarouK, Dec 21 '20 at 19:37

score 2 · Answer 1 · answered Jan 21 '19 at 03:31

I have experienced the same error while increasing the height of the slider.

The edges of the slider lost the rounded corners, when the height of slider increased. To fix it I created images with rounded corners and assigned it to the slider minimum track image.

Swift

 override func viewDidLoad() {
        super.viewDidLoad()

        slider.maximumTrackTintColor = UIColor.gray;

        let img:UIImage = GetImage(rectToDraw: CGRect(x: 0, y: 0, width: 400, height: 400));

        slider.setMinimumTrackImage(img.resizableImage(withCapInsets: UIEdgeInsets(top: 13,left: 15,bottom: 15,right: 14)), for: UIControlState.normal)
        slider.setMinimumTrackImage(img.resizableImage(withCapInsets: UIEdgeInsets(top: 13,left: 15,bottom: 15,right: 14)), for: UIControlState.selected)
    }

    func GetImage(rectToDraw:CGRect) -> UIImage {

        let layer:CALayer =  CALayer()
        layer.frame = rectToDraw;
        layer.cornerRadius = 20;
        layer.backgroundColor = UIColor.red.cgColor;
        UIGraphicsBeginImageContext(layer.frame.size)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let  image :UIImage = UIGraphicsGetImageFromCurrentImageContext()!
        UIGraphicsEndImageContext()
        return image;
    }

Xamarin.iOS

Within the Custom Renderer

 protected override void OnElementChanged(ElementChangedEventArgs<Slider> e)
            {
                MySlideriOS sliderIos = new MySlideriOS();
                SetNativeControl(sliderIos);
                base.OnElementChanged(e);
            }

Within the Custom slider

 public class MySlideriOS : UISlider
    {
        public UILabel label = null;

        public MySlideriOS()
        {

             this.MaximumTrackTintColor = UIColor.Gray;

            UIImage img = GetImage(new CGRect(0,0,400,400));

            this.SetMinTrackImage(img.CreateResizableImage(new UIEdgeInsets(13, 15, 15,14)), UIControlState.Normal);
            this.SetMinTrackImage(img.CreateResizableImage(new UIEdgeInsets(13, 15, 15, 14)), UIControlState.Selected);


            this.MaxValue = 15;
        }
 public UIImage GetImage(CGRect recttoDraw)
        {
            CGRect rect = recttoDraw;

            CALayer layer = new CALayer();
            layer.Frame = recttoDraw;
            layer.CornerRadius = 20;
            layer.BackgroundColor = UIColor.Red.CGColor;
            UIGraphics.BeginImageContext(layer.Frame.Size);
            layer.RenderInContext(UIGraphics.GetCurrentContext());
            UIImage image = UIGraphics.GetImageFromCurrentImageContext();
            UIGraphics.EndImageContext();
            return image;

        }

This works fine, but the edges are blurred, to solve this issue use this imageContext (the one below layer.backgroundColor): UIGraphicsBeginImageContextWithOptions(size, false, 0). I have suggested an edit for the answer. — FarouK, Dec 20 '20 at 21:19

score -1 · Answer 2 · answered Feb 03 '15 at 16:57

I've experienced the same glitch and found a solution by adding a minimumTrackImage for the slider, based on color.

UIImage *black = [UIImage imageWithColor:[UIColor blackColor]];
[self.slider setMinimumTrackImage:black forState:UIControlStateNormal];

Add a category of UIImage with the following method - imageWithColor

+ (UIImage *)imageWithColor:(UIColor *)color {
    CGRect rect = CGRectMake(0.0f, 0.0f, 1.0, 1.0);
    UIGraphicsBeginImageContext(rect.size);
    CGContextRef context = UIGraphicsGetCurrentContext();

    CGContextSetFillColorWithColor(context, [color CGColor]);
    CGContextFillRect(context, rect);

    UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
    UIGraphicsEndImageContext();

    return image;
}

UISlider distorted rounded corner

2 Answers2

Linked