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

Answer 2

I have created the similar slider by subclassing UISlider.

//Get thumb rect for larger track rect than actual to move slider to edges
-(CGRect)thumbRectForBounds:(CGRect)bounds trackRect:(CGRect)rect value:(float)value {
    UIImage *image = self.currentThumbImage;

    rect.origin.x -= SLIDER_OFFSET;
    rect.size.width += (SLIDER_OFFSET*2);
    CGRect thumbRect = [super thumbRectForBounds:bounds trackRect:rect value:value];
    return CGRectMake(thumbRect.origin.x, rect.origin.y+2, image.size.width, image.size.height);
}

//Make track rect smaller than bounds
-(CGRect)trackRectForBounds:(CGRect)bounds  {
    bounds.origin.x += SLIDER_OFFSET;
    bounds.size.width -= (SLIDER_OFFSET*2);
    CGRect trackRect = [super trackRectForBounds:bounds];

    return CGRectMake(trackRect.origin.x, trackRect.origin.y, trackRect.size.width, trackRect.size.height);
}