How to change UISlider Thumb Appearance when Touch Ends

Question

I am changing the color of a UISlider by calling .thumbTintColor

@IBAction func slider1Master(sender: AnyObject) {

    slider1.thumbTintColor = UIColor.orangeColor()}

It works, but I want the color to change back to it's original state when the touch ends (user lifts finger).

Does anyone have any suggestions? Thank you.

Answer 1

You can use "setThumbImage" instead. Then you have the option of setting an image for a specific state of action. For the image, just create a rounder image with the color you desire.

//Creating an Image with rounded corners:

extension UIImage {
    class func createThumbImage(size: CGFloat, color: UIColor) -> UIImage {
        let layerFrame = CGRectMake(0, 0, size, size)

        let shapeLayer = CAShapeLayer()
        shapeLayer.path = CGPathCreateWithEllipseInRect(layerFrame.insetBy(dx: 1, dy: 1), nil)
        shapeLayer.fillColor = color.CGColor
        shapeLayer.strokeColor = color.colorWithAlphaComponent(0.65).CGColor

        let layer = CALayer.init()
        layer.frame = layerFrame
        layer.addSublayer(shapeLayer)
        return self.imageFromLayer(layer)
    }
    class func imageFromLayer(layer: CALayer) -> UIImage {
        UIGraphicsBeginImageContextWithOptions(layer.frame.size, false, UIScreen.mainScreen().scale)
        layer.renderInContext(UIGraphicsGetCurrentContext()!)
        let outputImage = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage
    }
}


//Setting the image for a selected state of UISlider:

func setupSlider() {
        let size:CGFloat = 12
        let highlightedStateOrangeColorImage = UIImage.createThumbImage(size, color: UIColor.orangeColor())
        let defaultStateBlueColorImage = UIImage.createThumbImage(size, color: UIColor.blueColor())
        self.slider.setThumbImage(highlightedStateOrangeColorImage, forState: UIControlState.Highlighted)
        self.slider.setThumbImage(defaultStateBlueColorImage, forState: UIControlState.Normal)
}

Answer 2

You can safely accept McMatan’s solution as your answer. It is good for several reasons.

1. the colour changes back to its original state when the user lifts a finger, as you requested
2. using the extension to create a shape does away with image assets for the UISlider
3. it could also be used to draw images for circular UIButtons and circular UIViews.
4. it can also create a shape with colours matching other UISlider design elements (if so desired).

The code below does just that. I used McMatan’s UIImage extension with no changes other than translation to Swift 3. But I have split his function setUpSlider() into two, one for drawing the circular image in its default state, the other for drawing it in its highlighted state.

By accepting McMatan’s solution, you will encourage those who contribute their experience and free time to continue making this forum worthwhile for the rest of us. So please do.

class ViewController: UIViewController {

    var slider: UISlider!
    let defaultColour                   = UIColor.blue
    let highlightedColour               = UIColor.orange

    let thumbSize                       = 20

    override func viewDidLoad() {
        super.viewDidLoad()

        slider                          = UISlider(frame: CGRect(x: 0, y: 0, width: 200, height: 23))
        slider.minimumValue             = 0
        slider.minimumTrackTintColor    = defaultColour
        slider.maximumValue             = 100
        slider.maximumTrackTintColor    = highlightedColour

        slider.center                   = view.center

        slider.value                    = slider.maximumValue / 2.0

        let highlightedImage            = makeHighlightedImage()
        let defaultImage                = makeDefaultImage()

        slider.setThumbImage(highlightedImage, for: UIControlState.highlighted)
        slider.setThumbImage(defaultImage, for: UIControlState.normal)

        slider.isContinuous             = false

        view.addSubview(slider)

        slider.addTarget(self, action: #selector(sliderValueChanged), for: UIControlEvents.valueChanged)
    }

    func sliderValueChanged(sender: UISlider){
        print(sender.value)
    }

    func makeHighlightedImage() -> (UIImage) {
        let size                        = CGFloat(thumbSize)
        let highlightedStateImage       = UIImage.createThumbImage(size: size, color: highlightedColour)
        return (highlightedStateImage)
    }

    func makeDefaultImage() -> (UIImage) {
        let size                        = CGFloat(thumbSize)
        let defaultStateImage           = UIImage.createThumbImage(size: size, color: defaultColour)
        return (defaultStateImage)
    }
}

Extension translated to Swift 3

import UIKit

extension UIImage {

    class func createThumbImage(size: CGFloat, color: UIColor) -> UIImage {

        let layerFrame                  = CGRect(x: 0, y: 0, width: size, height: size)

        let shapeLayer                  = CAShapeLayer()
        shapeLayer.path                 = CGPath(ellipseIn: layerFrame.insetBy(dx: 1, dy: 1), transform: nil)
        shapeLayer.fillColor            = color.cgColor
        shapeLayer.strokeColor          = color.withAlphaComponent(0.65).cgColor

        let layer                       = CALayer.init()
        layer.frame                     = layerFrame
        layer.addSublayer(shapeLayer)
        return self.imageFromLayer(layer: layer)

    }

    class func imageFromLayer(layer: CALayer) -> UIImage {

        UIGraphicsBeginImageContextWithOptions(layer.frame.size, false, UIScreen.main.scale)
        layer.render(in: UIGraphicsGetCurrentContext()!)
        let outputImage                 = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return outputImage!
    }
}

Answer 3

I came up with an answer similar to MCMatan's but without the need for a UIImage extension:

func setThumbnailImage(for slider: UISlider, thumbnailHeight: CGFloat, thumbnailColor: UIColor) {
    
    let cornerRadius: CGFloat = 25 
    
    let rect = CGRect(x: 0, y: 0, width: thumbnailHeight, height: thumbnailHeight)

    let size = CGSize(width: thumbnailHeight, height: thumbnailHeight)

    UIGraphicsBeginImageContextWithOptions(size, false, 0)

    // this is what makes it round
    UIBezierPath(roundedRect: rect, cornerRadius: cornerRadius).addClip()

    thumbnailColor.setFill()
    UIRectFill(rect)

    if let newImage = UIGraphicsGetImageFromCurrentImageContext() {

        slider.setThumbImage(nil, for: .normal)
        slider.setThumbImage(newImage, for: .normal)
    }

    UIGraphicsEndImageContext()
}

To use:

override func viewDidLoad() {
    super.viewDidLoad()

    setThumbnailImage(for: yourSlider, thumbnailHeight: 20.0, thumbnailColor: UIColor.red)
}

or

func someActionJustFinishedNowUpdateThumbnail() {

    setThumbnailImage(for: yourSlider, thumbnailHeight: 40.0, thumbnailColor: UIColor.blue)
}

or

func setThumbnailToSliderHeight() {

    let sliderHeight = yourSlider.frame.size.height

    setThumbnailImage(for: yourSlider, thumbnailHeight: sliderHeight, thumbnailColor: UIColor.purple)
}