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 get the super-view 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 to get it initialized.

Result:

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

Answer 2

I guess the best option is to add a border layer to Track CGRect.

Find below a UISlider subclassing approach in Swift 5:

final class BorderedUISlider: UISlider {
    private var sliderBorder: CALayer = {
        let layer = CALayer()
        layer.borderWidth = 1
        layer.borderColor = ***Here Your Color***.cgColor
        return layer
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        let rect = trackRect(forBounds: bounds)
        sliderBorder.removeFromSuperlayer()
        sliderBorder.frame = rect
        sliderBorder.cornerRadius = rect.height / 2
        layer.addSublayer(sliderBorder)
    }
}

Answer 3

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:

Answer 4

The above figure is an example, using pure code implementation.

  private let volumeSlider = UISlider().then {
    let minimumTrackImage = UIView().then {
      $0.backgroundColor = R.color.tint()
      $0.pin.size(CGSize(width: 312, height: 6)) // <<< Key location, width of your slider, you can also customize the height here.
      $0.cornerRadius = 3
    }.screenshot

    let maximumTrackImage = UIView().then {
      $0.backgroundColor = .white
      $0.pin.size(CGSize(width: 312, height: 6))
      $0.borderColor = R.color.tint()
      $0.borderWidth = 1
      $0.cornerRadius = 3
    }.screenshot

    let thumbImage = UIView().then {
      $0.backgroundColor = .white
      $0.cornerRadius = 13
      $0.pin.size($0.cornerRadius * 2)
      $0.borderColor = R.color.tint()
      $0.borderWidth = 1
    }.screenshot

    $0.setMinimumTrackImage(minimumTrackImage, for: .normal)
    $0.setMaximumTrackImage(maximumTrackImage, for: .normal)
    $0.setThumbImage(thumbImage, for: .normal)
    $0.value = 0.3
  }

The code is from my project, using a bunch of third-party libraries, but I think it should not prevent you from understanding it. They are all helpers and will not affect the core code.

Which:
- R is from R.Swift .
- then is from Then .
- pin is from PinLayout .
- screenshot is

extension UIView {

  var screenshot: UIImage {
    return UIGraphicsImageRenderer(size: bounds.size).image { _ in
      drawHierarchy(in: bounds, afterScreenUpdates: true)
    }
  }

}

You can also use images. As long as the width is the same as the maximum width of the slider. Hope it helps you, although it is a little late. Any questions can be commented below.

Answer 5

Add the border width and border color to your UISlider

Yourslider.layer.borderWidth = 4.0
let red = UIColor(red: 255.0/255.0, green: 0.0/255.0, blue: 0.0/255.0, alpha: 1.0)
Yourslider.layer.borderColor = red.cgColor