UISlider distorted rounded corner - ios

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 ?
Edit: Here is the code that reproduces the issue :
UISlider *slider = [[UISlider alloc] initWithFrame:CGRectMake(40, 40, 180, 50)];
[slider setMinimumTrackTintColor:[UIColor whiteColor]];

Answer 1

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

Answer 2

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