Make UISlider height larger?

Question

I've been searching for a way to make the UISlider progress bar taller, like increasing the height of the slider but couldn't find anything. I don't want to use a custom image or anything, just make it taller, so the UISlider doesn't look so thin. Is there an easy way to do this that I'm missing?

Cita

Maybe you could try by changing the scale factor ? Not sure it would work as intended. – Fraxinella

Would you exemplify what you mean? The scale factor of what? – Cita

developer.apple.com/library/ios/documentation/graphicsimaging/… – Fraxinella

Answer 1

I found what I was looking for. The following method just needs to be edited in a subclass.

override func trackRect(forBounds bounds: CGRect) -> CGRect {
   var customBounds = super.trackRect(forBounds: bounds)
   customBounds.size.height = ...
   return customBounds
}

Cita

This is good (and works), but don't forget to call bounds = [super trackRectForBounds:bounds]; or else it will change the slider frame.. – Chipper

@Cutetare, Why would you need to call the super trackRectForBounds: method if you want to pass your own bounds? – Canula

Answer 2

The accepted answer will undesirably change the slider's width in some cases, like if you're using a minimumValueImage and maximumValueImage. If you only want to change the height and leave everything else alone, then use this code:

override func trackRect(forBounds bounds: CGRect) -> CGRect {
   var newBounds = super.trackRect(forBounds: bounds)
   newBounds.size.height = 12
   return newBounds
}

Newcomb

Just as an extra step, you can add newBounds.origin.y -= 6 (or your new value divided by 2) just to be sure it's centered in Y with the new thickness value. – Terrazas

@FernandoMata not quite 6... need to subtract (newHeight-originalHeight)/2 from y – Ericerica

Answer 3

Here's my recent swifty implementation, building on CularBytes's ...

open class CustomSlider : UISlider {
    @IBInspectable open var trackWidth:CGFloat = 2 {
        didSet {setNeedsDisplay()}
    }

    override open func trackRect(forBounds bounds: CGRect) -> CGRect {
        let defaultBounds = super.trackRect(forBounds: bounds)
        return CGRect(
            x: defaultBounds.origin.x,
            y: defaultBounds.origin.y + defaultBounds.size.height/2 - trackWidth/2,
            width: defaultBounds.size.width,
            height: trackWidth
        )
    }
}

Use this on a UISlider in a storyboard by setting its custom class

The IBInspectable allows you to set the height from the storyboard

Yorke

The @IBInspectable is an amazing addition 👍 – Labe

Thanx bro for this. – Nonessential

Answer 4

For those that would like to see some working code for changing the track size.

class CustomUISlider : UISlider {

    override func trackRect(forBounds bounds: CGRect) -> CGRect {

        //keeps original origin and width, changes height, you get the idea
        let customBounds = CGRect(origin: bounds.origin, size: CGSize(width: bounds.size.width, height: 5.0))
        super.trackRect(forBounds: customBounds)
        return customBounds
    }

    //while we are here, why not change the image here as well? (bonus material)
    override func awakeFromNib() {
        self.setThumbImage(UIImage(named: "customThumb"), for: .normal)
        super.awakeFromNib()
    }
}

Only thing left is changing the class inside the storyboard:

You can keep using your seekbar action and outlet to the object type UISlider, unless you want to add some more custom stuff to your slider.

Woolfell

Meh. This works but it messes the alignment of the UISlider up quite a bit and the setThumbImage function doesn't work. – Maximilien

Please elaborate why it messes the alignment up? Are you sure setThumbImage doesn't work? I've just checked in Xcode 7.0 beta, Swift 2.0 – Woolfell

I think the origin isn't centering it vertically (like the default UISlider). I just added a top constraint to counter it. – Maximilien

@BrightFuture Are you sure forBounds bounds is swift 3? Is the complete code working on swift 3? I'm not currently into swift 3 development but just want to verify, looks odd. – Woolfell

@Woolfell yes it does, the code is converted by Xcode – Lustral

Answer 5

You could play with this, see what happens:

slider.transform = CGAffineTransformScale(CGAffineTransformIdentity, 1.0, 2.0);

Stutman

Because this changes the whole frame instead of just the bar like the question stated and doesn't re-adjust the corner radius or the thumb slider frames so everything looks disproportionate. – Spline