UISlider track not increasing in thickness

Question

I can't seem to increase the thickness of the track. Been trying other recommendations and looking for this option in the documentation but it doesn't seem to be working, anyone know why?:(

class factionButton: UISlider {
var factionSlider = UISlider() 

func factionBalanceSlider(){
    factionSlider.frame = CGRect(x: 15, y: 542, width: 386, height: 57)
    factionSlider.minimumValueImage = #imageLiteral(resourceName: "Alliance Slider")
    factionSlider.maximumValueImage = #imageLiteral(resourceName: "Horde Slider")
    factionSlider.setThumbImage(#imageLiteral(resourceName: "Thumb Image"), for: .normal)
    factionSlider.minimumTrackTintColor = UIColor(red:0.08, green:0.33, blue:0.69, alpha:0.8)
    factionSlider.maximumTrackTintColor = UIColor(red:1.00, green:0.00, blue:0.00, alpha:0.59)

    factionSlider.setValue(0.5, animated: true)
    factionSlider.isContinuous = true
    factionSlider.addTarget(self, action: #selector(recordFactionBalance(sender:)) , for: .valueChanged)
}

func getSlider() -> UISlider {
    return factionSlider
}

override func trackRect(forBounds bounds: CGRect) -> CGRect {
    let customBounds = CGRect(x: 16, y: 21, width: 343, height: 7)
    super.trackRect(forBounds: customBounds)
    return customBounds
}

I think this is what you are looking for https://stackoverflow.com/a/35820464/6080920 You are providing height just 7 its too small — iOS Geek, Aug 06 '18 at 04:31
@iOSGeek I was meaning to find that again after I lost it. Thanks! I put in 7, and then 700 but it doesn't seem to be changing the track size at all:( — HayashiEsme, Aug 06 '18 at 04:34

Kamran · Accepted Answer · 2018-08-06T06:35:40.840

As mentioned in many other answers, you can change the height by creating a custom slider as below,

class CustomSlider: UISlider {

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

But in your particular case, you are not seeing the change because your implementation is not allowing the factionSlider to use overridden trackRect. To use that you need to change that to CustomSlider as below,

class FactionButton: UISlider {
    var factionSlider = CustomSlider() 

    func factionBalanceSlider(){
        factionSlider.frame = CGRect(x: 15, y: 542, width: 386, height: 57)
        factionSlider.minimumValueImage = #imageLiteral(resourceName: "Alliance Slider")
        factionSlider.maximumValueImage = #imageLiteral(resourceName: "Horde Slider")
        factionSlider.setThumbImage(#imageLiteral(resourceName: "Thumb Image"), for: .normal)
        factionSlider.minimumTrackTintColor = UIColor(red:0.08, green:0.33, blue:0.69, alpha:0.8)
        factionSlider.maximumTrackTintColor = UIColor(red:1.00, green:0.00, blue:0.00, alpha:0.59)

        factionSlider.setValue(0.5, animated: true)
        factionSlider.isContinuous = true
        factionSlider.addTarget(self, action: #selector(recordFactionBalance(sender:)) , for: .valueChanged)
    }

    func getSlider() -> UISlider {
        return factionSlider
    }
}

Note In Swift, class name should start with Capital as i updated above. Secondly, I think FactionButton should not be a subclass of UISlider.

Oh my god, thank you! I can't believe I missed this. Time to go to sleep. Thanks you:3 — HayashiEsme, Aug 06 '18 at 04:55

score 4 · Answer 2 · answered Aug 06 '18 at 04:30

4

You should get the current bounds from the super class first, then just change the height:

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

answered Aug 06 '18 at 04:30

RLoniello

2,309
2
19
26

I was going to figure out how to do this, thanks! But the track seems to still stay the same as before I overrode it:( – HayashiEsme Aug 06 '18 at 04:32
make sure you are using your UISlider class `factionButton` for the `Custom Class` Attribute in your storyboard. – RLoniello Aug 06 '18 at 04:53

score 2 · Answer 3 · edited Feb 15 '19 at 11:34

Setting the rect size expands the slider to the bottom only. So the origin should be recalculated to keep the slider centered.

@IBDesignable
class CustomSlider: UISlider {

@IBInspectable var trackHeight: CGFloat = 6

override func trackRect(forBounds bounds: CGRect) -> CGRect {
    var rect = super.trackRect(forBounds: bounds)
    rect.size.height = trackHeight
    rect.origin.y -= trackHeight / 2
    return rect
  }
}

score 0 · Answer 4 · answered Mar 13 '21 at 10:57

I made this by adding this

1.

class CustomSlider: UISlider {
    
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        let point = CGPoint(x: bounds.minX, y: bounds.midY)
        return CGRect(origin: point, size: CGSize(width: bounds.width, height: 10)) //this height is the thickness 
    }
    
}

storyboard - change UISlider class to my CustomSlider

FYI for newbie like me.. change color is here :)

UISlider track not increasing in thickness

4 Answers4