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?

Maybe you could try by changing the scale factor ? Not sure it would work as intended. — Antzi, Apr 27 '14 at 06:44
Would you exemplify what you mean? The scale factor of what? — Josue Espinosa, Apr 27 '14 at 06:44
https://developer.apple.com/library/ios/documentation/graphicsimaging/reference/CGAffineTransform/Reference/reference.html — Antzi, Apr 28 '14 at 04:03

kwahn · Answer 1 · 2016-12-31T18:04:46.123

69

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
}

edited Dec 31 '16 at 18:04

answered Mar 05 '16 at 22:00

kwahn

2,118
2
21
17

4

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. – Fernando Mata Apr 04 '18 at 04:05
@FernandoMata not quite 6... need to subtract `(newHeight-originalHeight)/2` from `y` – Tim Jan 22 '19 at 19:15

score 38 · Answer 2 · answered Jan 17 '17 at 11:22

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

The `@IBInspectable` is an _amazing_ addition – mgarciaisaia Apr 27 '19 at 19:40 — mgarciaisaia, Apr 27 '19 at 19:40
Thanx bro for this. – Bijender Singh Shekhawat Jul 04 '20 at 15:06 — Bijender Singh Shekhawat, Jul 04 '20 at 15:06

score 20 · Answer 3 · edited Nov 07 '16 at 15:22

20

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:

storyboardstuff

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.

edited Nov 07 '16 at 15:22

Bright

5,699
2
50
72

answered Jul 15 '15 at 17:32

CularBytes

9,924
8
76
101

1

Meh. This works but it messes the alignment of the `UISlider` up quite a bit and the `setThumbImage` function doesn't work. – Michael Aug 13 '15 at 18:09
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 – CularBytes Aug 13 '15 at 18:36
I think the origin isn't centering it vertically (like the default UISlider). I just added a top constraint to counter it. – Michael Aug 13 '15 at 18:37
@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. – CularBytes Nov 07 '16 at 15:34
1

@CularBytes yes it does, the code is converted by Xcode – Bright Nov 07 '16 at 23:01

Josue Espinosa · Accepted Answer · 2021-02-18T16:47:30.630

15

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
}

edited Feb 18 '21 at 16:47

answered Apr 27 '14 at 06:50

Josue Espinosa

5,009
16
47
81

4

This is good (and works), but don't forget to call bounds = [super trackRectForBounds:bounds]; or else it will change the slider frame.. – Cutetare Aug 05 '14 at 09:28
2

@Cutetare, Why would you need to call the super `trackRectForBounds:` method if you want to pass your own bounds? – Iulian Onofrei Sep 16 '15 at 12:42

score -2 · Answer 5 · answered Apr 27 '14 at 17:49

-2

You could play with this, see what happens:

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

answered Apr 27 '14 at 17:49

Jelle

1,024
10
18

1

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. – Mark Bourke May 15 '16 at 17:01

Make UISlider height larger?

5 Answers5

Linked

Related