How to personalize and use UISlider in Swift

So, you had that amazing idea for an app and you want to use a slider in the app, but you have no idea how to use it because it’s your first time using it? Or did you already used and you want to personalize it? Seek no further, because I am here!

So, I will divide this article into two parts: the first part it’s how to make your slider BBBBEAUTIFULL! And the second part (the quickest one) how to access and use its values.

This is how our app should be at the end of the process (just for learning sake):

Our objective!

Allright, let’s start. In advance, I already created a screen so we can have some fun. This is how it looks:

Current screen

In the background, we have an UIImageView, a big Label in the top of the screen, a slider and another Label in the middle of the screen. Now that we have the screen ready, we want to change our slider to look like this:

How we want our slider to look like

We can see that this slider is too different from the default slider! How do we do that? First, let's understand the structure behind this slider:

What is made of a slider

Ok, this is new! If the ball goes to the left, it gets close to the minimum value of it, and if goes far to the right, it will get close to the maximum value. This little circle is called thumb, and the line where the thumb slides are called track. But wait, minimum and maximum value? How much is it? Can I change it? Yes, you can! Go to the left of your Xcode, in the Attributes Inspector:

Where to change slider values

And right below it, you can see those fields:

Slider fields

The value attribute is where the thumb is, is the value you want to access. You can change where they will start there as well! The minimum and maximum are values that you may find handy sometimes. Let’s say that you want a slider that changes the Red from an RGB color, you can set the minimum at 0 and the maximum at 255, making your life waaaaay easier!

Allright, but how do I do it by code? We haven’t touched any of that in the code! First, let’s split the view, clicking in the Assistant Editor so we can do those things.

Allright,! Now let’s start putting all those things in the code. Click each label and the Control Key, hold it and drag to the code, give it a name and you are ready to go!

I’ve named my variables like so:

 @IBOutlet weak var appName: UILabel! 
 @IBOutlet weak var appSlider: UISlider! 
 @IBOutlet weak var showSliderValue: UILabel!

Ok, now it’s time to change the slider height! We do it by creating a custom class and overriding one of its functions. Wait, that seems to be way too complicated, how do I do it? This is how: Go to the end of the file, when the class ViewController ends, and write:

class CustomSlider: UISlider { }

So, what’s going on here?

The original slider is with a fixed height, so we need an identical class and just change that value. That’s why that heredity is there (we are calling the original class with the “:”, that’s pulling all the original attributes and functions inside the UISlider), and as I said before, right now this class is exactly like the original. To change its height, we override the “trackRect” function. Let’s write this inside our new class:

 override func trackRect(forBounds bounds: CGRect) -> CGRect {
     let point = CGPoint(x: bounds.minX, y: bounds.midY)
     return CGRect(origin: point, size: CGSize(width: bounds.width, height: 20))
 }

I want a slider with the height to equal 20. But the slider in the storyboard still uses the original class, we created a new one but didn’t say anywhere that the slider should be using our class! Ok! Time to go to the storyboard and click in the Identity Inspector. After this, write the class we created in the Class right below it.

Those changes won’t appear in the storyboard, but in the simulator! If you run the code… It’s working! That’s really big! We did it!

Ok, what about the colors? I used the classic FF0000 in the first part and a beautiful 680000 in the second part of the slider. But how do we change it? First, go to the assets and click while pressing the Control Key, then select “New Color Set”:

Setting new colors in the assets

Then, go to the inspectors and select the Attributes Inspector, go down and select any kind of input method you want. I prefer the hexadecimal method (and I already gave it to you guys this format).

Changing the input method to Hexadecimal

Create 2 colors this way and set the colors you want, this way you can easily use or change them in the future!

Now, to change the colors, remember that we had that min and max while seeing the slider? To change the minimum track color (everything before the thumb), we will call the method minimumTrackTintColor, and the maximum (everything after the thumb) maximumTrackColor:

 appSlider.minimumTrackTintColor = UIColor(named: “MyLightRed”)
 appSlider.maximumTrackTintColor = UIColor(named: “MyDarkRed”)

Ooooook! Now we need to change the thumb. But wait a minute, the thumb… is an image?!? 😮 Well, now we need to create assets for that them and add them to the assets folder. I used a ball with a size of 30px and 30px to my project.

Then write:

appSlider.setThumbImage(UIImage(named: “YourImageName”), for: .normal)

Ok! Let’s build it and… It’s working! Allright! Now it’s time to read the value of the slider.

This time, we will grab the slider in the storyboard, press control, gold and drag to the code, but this time we will select the Action:

Creating an action slider function

Ok, now every time we use the slider, this function will be called. So, inside the function:

@IBAction func sliderValueChanged(_ sender: Any) {
     self.showSliderValue.text = “\(self.appSlider.value)”
}

We are grabbing the attribute text inside the label and setting it’s text to the value attribute of the slider. But you can set it to be anything, like changing the background of your app! Your imagination is your limit.

Really, this is done. This was the easiest part, wasn’t it?

In the end, this is my code for this article (if you missed something, you might find this useful):

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var appName: UILabel!
    @IBOutlet weak var appSlider: UISlider!
    @IBOutlet weak var showSliderValue: UILabel!
    
    override func viewDidLoad() {
        super.viewDidLoad()
//         Do any additional setup after loading the view.
        appSlider.minimumTrackTintColor = UIColor(named: "MyLightRed")
        appSlider.maximumTrackTintColor = UIColor(named: "MyDarkRed")
        appSlider.setThumbImage(UIImage(named: "ThumbImage"), for: .normal)
    }
    
    @IBAction func sliderValueChanged(_ sender: Any) {
        self.showSliderValue.text = "\(self.appSlider.value)"
    }
    
}

class CustomSlider: UISlider {
    override func trackRect(forBounds bounds: CGRect) -> CGRect {
        let point = CGPoint(x: bounds.minX, y: bounds.midY)
        return CGRect(origin: point, size: CGSize(width: bounds.width, height: 20))
    }
}