Why does UISlider's custom thumb image get pixelated? (Images & codes inside)

Question

The default thumb of a UISlider is sometimes not too easy to grab and touch by all people (due to some people having relatively larger fingers), my aim is to make touch hotspot area larger, to solve this, I added a custom thumb image, the problem is that the image get pixelated !

Problem :

The thumb image get's pixelated like the following image

The following image shows the thumb's hotspot (by enabling color blended in the simulator debug menu)

This thumb image I'm using in xcode :

Is there a way to change the size of the thumb image like in UIImageView , I can't find a frame for the thumb image to manipulate the width and height.

My Code :

    var slider1=UISlider(frame:CGRectMake(Box.x4, 0, Box.x10, 100));
    slider1.minimumValue = 0;
    slider1.center.y = labelBudget1.center.y
    slider1.maximumValue = 100;
    slider1.continuous = false;
    slider1.value = 0;
    slider1.minimumTrackTintColor = hexStringToUIColor(Box.colorHexGreen)
    slider1.maximumTrackTintColor = UIColor.lightGrayColor()
    slider1.setThumbImage(UIImage(named: "sliderThumb.png"), forState: UIControlState.Normal)
    slider1.addTarget(self, action: "slider1ValueDidChange:", forControlEvents: UIControlEvents.TouchDragInside)
    scrollView1.addSubview(slider1);

My attempts to resolve this :

I found similar questions, but not with swift, and some are not answered, and some other solutions just didn't work, like this solution didn't solve the problem for me.

class ExtUISlider: UISlider
{
    var thumbTouchSize : CGSize = CGSizeMake(70, 70)

    override func pointInside(point: CGPoint, withEvent event: UIEvent?) -> Bool
    {
        let bounds = CGRectInset(self.bounds, -thumbTouchSize.width, -thumbTouchSize.height);
        return CGRectContainsPoint(bounds, point);
    }

    override func beginTrackingWithTouch(touch: UITouch, withEvent event: UIEvent) -> Bool
    {
        let thumbPercent = (value - minimumValue) / (maximumValue - minimumValue)
        let thumbSize = thumbImageForState(UIControlState.Normal)!.size.height
        let thumbPos = CGFloat(thumbSize) + (CGFloat(thumbPercent) * (CGFloat(bounds.size.width) - (2 * CGFloat(thumbSize))))
        let touchPoint = touch.locationInView(self)

        return (touchPoint.x >= (thumbPos - thumbTouchSize.width) && touchPoint.x <= (thumbPos + thumbTouchSize.width))
    }
}

I also tried to use a larger image, but it get's so large that it covers more area than I need ! and it would look strange, any help or tip is appreciated, thanks a lot.

EDIT @ Husyn

if I use a larger thumb image, then it is still pixelated and the limiting would be only like this, it will consider the empty area of the thumb as part of the thumb, I tried that before asking though, see gif.

the slider image i used

Answer 1

SOLVED by Psy| on IRC Channel

I Just needed to add 2x 3x images in an image set

The images resolutions are

triangle.png (27*42)

triangle@2x.png (54*84)

triangle@3x.png (81*126)

Answer 2

Simplest of solution is to use a big image with transparency. In this way you'll get a bigger touch area and it will not be visible to user.