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:

Beulahbeuthel

What is the thumb image supposed to look like? That control looks pretty normal to me. – Tomi

@CraigOtis I have added the thumb image(Its in white color just right click next to text and download ). – Beulahbeuthel

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

Tractate

Yeah I did what you suggested before posting the question. When I override the thumbRectForBounds:trackRect:value: the slider stops working(it doesn't slide). – Beulahbeuthel

override func thumbRectForBounds(bounds: CGRect, trackRect rect: CGRect, value: Float) -> CGRect { let thumbImage = UIImage(named: "slider")! let thumbImageSize = thumbImage.size return CGRect(x: -10, y: 0, width: thumbImageSize.width, height: thumbImageSize.height) } I have added the above code then the slider stops working(doesn't move) – Beulahbeuthel

Perhaps I should have been clearer. You need to implement thumbRectForBounds:trackRect:value: correctly. Obviously your implementation is ridiculous: if you give the same return rect no matter what the incoming value is, the slider won't move. – Tractate

@Tractate this actually happens even if you set the thumb image to same it already was by slider.setThumbImage(slider.thumbImageForState(.Normal), forState: .Normal) with the only requirement being that it must be some custom image (e.g. different thumb tint). If you wonder why someone would do that, is because of this: #20903817 – Emptyhanded

I fixed this issue with the same approach at: #40502900 – Escalator

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

Bette