CODEWITHSUNDEEP
swiftuislider
HayashiEsme
HayashiEsme

Reputation: 333

UISlider track not increasing in thickness

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
}

Upvotes: 5

Views: 4770

Answers (4)

Energy
Energy

Reputation: 958

enter image description here

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 
    }
    
}
  1. storyboard - change UISlider class to my CustomSlider

enter image description here

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

enter image description here

Upvotes: 0

3ps
3ps

Reputation: 109

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

Upvotes: 2

Kamran
Kamran

Reputation: 15238

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.

Upvotes: 13

RLoniello
RLoniello

Reputation: 2329

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
}

Upvotes: 4

Related Questions