UIslider thumb image doesn't start from the beginning

Question

I am trying to implement a control to show progress of a video and I am using a UISlider with a custom thumb image but the thumb image doesn't start from the beginning and it doesn't go till the end as well.

playerProgress = UISlider(frame: CGRectMake((btnImage.size.width + 2 * VideoViewControllerUX.ControlPadding), 0, (screenRect.size.width - (btnImage.size.width + 3 * VideoViewControllerUX.ControlPadding)), btnImage.size.height))
playerProgress.setThumbImage(UIImage(named: "slider"), forState: UIControlState.Normal)
playerProgress.maximumValue = 100
playerProgress.minimumValue = 0
playerProgress.addTarget(self, action: "playerProgressChanged:", forControlEvents: UIControlEvents.ValueChanged)

I am not sure whats going on.

• Thumb Image:

  

Answer 1

What you're seeing is normal. The slider leaves some extra space at both ends, so that the thumb is at minimum or maximum value when the edge of the thumb is at the end of the slider frame.

Look at these sliders. They have the same horizontal positions and width:

The first slider's thumb is as far to the left as it will go. It doesn't go further left, outside the frame of the track; it stops when its edge hits the the frame of the track. That is zero.

If you don't like where the thumb image is being drawn in relation to the overall track, you'll need to subclass UISlider and implement thumbRectForBounds:trackRect:value:.