Slider with custom thumb image and text

Question

Hy,

I'm trying to customize a slider by changing the thumb image and add a label over the picture. For this, in my view in I set the image for slider thumb:

class SliderView: NibLoadingView {
    @IBOutlet weak var slider: ThumbTextSlider!
   
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        contentView = legacyLoadXib()
        setup()
    }
    
    override func setup() {
        super.setup()
        
        self.slider.setThumbImage(UIImage(named: "onb_cc_slider_thumb")!, for: .normal)
        self.slider.thumbTextLabel.font = UIFont(name: Fonts.SanFranciscoDisplayRegular, size: 14)
    }
}

In ThumbTextSlider class I set the text label as below:

class ThumbTextSlider: UISlider {
    var thumbTextLabel: UILabel = UILabel()
    
    private var thumbFrame: CGRect {
        return thumbRect(forBounds: bounds, trackRect: trackRect(forBounds: bounds), value: value)
    }
    override func layoutSubviews() {
        super.layoutSubviews()
        thumbTextLabel.frame = thumbFrame
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        addSubview(thumbTextLabel)
        thumbTextLabel.layer.zPosition = layer.zPosition + 1
    }
}

When I made test the result was a little different.

How, can I fix the issue ? The expected result: Kind regards

Answer 1

This class may help you. In class instead of image I created image you can replace with you thumb image.

class ThumbTextSlider: UISlider {
    private var thumbTextLabel: UILabel = UILabel()
    
    private var thumbFrame: CGRect {
        return thumbRect(forBounds: bounds, trackRect: trackRect(forBounds: bounds), value: value)
    }
    
    private lazy var thumbView: UIView = {
        let thumb = UIView()
        return thumb
    }()
    
    override func layoutSubviews() {
        super.layoutSubviews()
        thumbTextLabel.frame = CGRect(x: thumbFrame.origin.x, y: thumbFrame.origin.y, width: thumbFrame.size.width, height: thumbFrame.size.height)
        self.setValue()
    }
    
    private func setValue() {
        thumbTextLabel.text = self.value.description
    }
    
    override func awakeFromNib() {
        super.awakeFromNib()
        
        addSubview(thumbTextLabel)
        thumbTextLabel.textAlignment = .center
        thumbTextLabel.textColor = .blue
        thumbTextLabel.adjustsFontSizeToFitWidth = true
        thumbTextLabel.layer.zPosition = layer.zPosition + 1
        
        let thumb = thumbImage()
        setThumbImage(thumb, for: .normal)
    }
    
    private func thumbImage() -> UIImage {
        let width = 100
        thumbView.frame = CGRect(x: 0, y: 15, width: width, height: 30)
        thumbView.layer.cornerRadius = 15
        
        let renderer = UIGraphicsImageRenderer(bounds: thumbView.bounds)
        return renderer.image { rendererContext in
            rendererContext.cgContext.setShadow(offset: .zero, blur: 5, color: UIColor.black.cgColor)
            thumbView.backgroundColor = .red
            thumbView.layer.render(in: rendererContext.cgContext)
        }
    }
    
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        return CGRect(origin: bounds.origin, size: CGSize(width: bounds.width, height: 5))
    }
}