How to add border color to UISlider track in Swift 4?

Question

I want to make UISlider with minimumTrackTintColor and minimumTrackTintColor with track borderColor

I've already set a trackTintColor for both minimum and maximum state but instead I want to add border for UISlider track

• My UISlider looks Like this:

• I need to track border like this:

• Code

class SliderWithHeart: UISlider
{

    override func awakeFromNib()
    {
        super.awakeFromNib()

        let imageTint = UIImage(named: "SliderHeart")
        self.minimumTrackTintColor = colorWithHex(hex: COLORCODE.APP_BUTTON_COLOR)
        self.maximumTrackTintColor = colorWithHex(hex: COLORCODE.APP_ORANGE_COLOR)
        self.setThumbImage(imageTint, for: .normal)
    }
    override func layoutSubviews()
    {
        super.layoutSubviews()
        super.layer.cornerRadius = self.frame.height/2
    }

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

}

How do I set the border color of the slider track, not the entire slider?

Answer 1

You can use the subviews of UISlider to do the modifications as per the requirements.

To increase the height:

 class CustomSlider: UISlider {

   override func trackRect(forBounds bounds: CGRect) -> CGRect {
       let customBounds = CGRect(origin: bounds.origin, size: CGSize(width: bounds.size.width, height: 17.0))
       super.trackRect(forBounds: customBounds)
       return customBounds
   }
}

To add the border (you can write this code in the viewDidLoad() method):

DispatchQueue.main.asyncAfter(deadline: .now() + 0.1) {
            if #available(iOS 14.0, *) {
                self.slider.subviews.first?.subviews[1].layer.borderWidth = 2.8
                self.slider.subviews.first?.subviews[1].layer.borderColor = UIColor.white.cgColor
                self.slider.subviews.first?.subviews[1].makeRoundCorner(8.0)
            }
            else{
                self.slider.subviews[1].layer.borderWidth = 2.8
                self.slider.subviews[1].layer.borderColor = UIColor.white.cgColor
                self.slider.subviews[1].makeRoundCorner(8.0)
            }
        }

I had to use the delay for the exact working.

Result:

Note: I didn't provide the code for the thumb, shadow, and other properties of the slider.

Answer 2

If you debug UISlider on view hierarchy, you will see the boundaries of the slider.

According to this, you can set the backgroundColor of the slider to add a border effect (default is nil).

Example:

let valueSlider: UISlider = {
    let slider = UISlider(frame: .zero)
    slider.translatesAutoresizingMaskIntoConstraints = false
    slider.isContinuous = true
    slider.tintColor = .green
    slider.thumbTintColor = .darkGray
    slider.cornerRadius = 4
    slider.clipsToBounds = false
    slider.maximumTrackTintColor = .gray

    // Setting the background will add the effect of a border for the slider
    slider.backgroundColor = .gray

    return slider
}()

Without setting backgroundColor:

With backgroundColor: