7

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:

Slider Image 1 Slider Image 2

  • I need to track border like this:

Image with border

  • 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?

7
  • you can use "sliderName.layer.borderColor = UIColor.red.cgColor" that can might help you Jul 19, 2019 at 7:54
  • I've been already used it, it's not working. Jul 19, 2019 at 7:56
  • in which function you have used it and how you used it. like you call slider name or used self?? Jul 19, 2019 at 7:58
  • awakeFromNib(). With calling self. Jul 19, 2019 at 7:59
  • @BhaveshSarsawa Post an image of your desired output not for the entire slider.
    – TheTiger
    Jul 19, 2019 at 8:02

5 Answers 5

3

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:

enter image description here

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

1

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

Slider selected on view hierarchy Boundaries of the slider on view hierarchy

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: enter image description here

With backgroundColor: enter image description here

0

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

-2

enter image description here

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.

-3

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
1
  • 3
    Here i want to add Border for Track not for whole UiSlider Jul 19, 2019 at 7:58

Your Answer

Reminder: Answers generated by Artificial Intelligence tools are not allowed on Stack Overflow. Learn more

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.