iOS UISlider With Examples [Latest]

UISlider

A UISlider is a control that allows the user to select a value from a range of values horizontally by dragging the thumb to the position desired.

Some use cases where a UISlider is used:

• Changing the Volume
• Changing the Brightness
• Changing the current seek of the Video

To create a new UISlider UI in your application, most importantly you need to specify the range of values.
The isContinous property is used to set whether the slider is continous through the range of values or not.

That means, when the isContinous is set to false, the value change would be notified to the target action method only when you release the thumb.

We can set UIImage at either end of the UISlider.

• minimumValueImage and maximumValueImage are used to set the image at either end.
• minimumTrackTintColor is used to set the color of the track till the thumb’s current position.
• maximumTrackTintColor is used to set the color of the track from the current thumb position till the end of the track.
• thumbTintColor is used to set the tint color property on the thumb of the UISlider
• currentThumbImage is used to set the image to be rendered on the thumb.
• setThumbImage is used to set the image for a specific event.

Accessing the Values

To access the value of the UISlider we can do the following:

• var value: Float: The slider’s current value.
• func setValue(Float, animated: Bool): Sets the slider’s current value, allowing you to animate the change visually.
• minimumValue maximumValue is used to get and set the min and max values in Float for the UISlider.

In the following section, we’ll be creating UISlider. Both programmatically and using the Interface Builder in our Storyboard.

Let’s get started!

Project Storyboard

The Main.storyboard of our XCode project looks like this:

The IBAction for the event type Value changed can be created as:

Code

The code for the ViewController.swift is given below:

import UIKit
class ViewController: UIViewController {
    @IBOutlet weak var myLabel: UILabel!
    @IBOutlet weak var mySlider: UISlider!
    override func viewDidLoad() {
        super.viewDidLoad()
        createSliderProgrammatically()
    }
    @IBAction func mySliderValueChanged(_ sender: Any) {
        if (sender as! UISlider).tag == 101{
            myLabel.text = ("Programmatic Slider value is: ((sender as! UISlider).value)")
        }
        else{
            myLabel.text = ("Slider value is: ((sender as! UISlider).value)")
        }
    }
    func createSliderProgrammatically()
    {
        let mySlider = UISlider(frame:CGRect(x: 10, y: 100, width: 300, height: 20))
        mySlider.minimumValue = 0
        mySlider.maximumValue = 100
        mySlider.isContinuous = false
        mySlider.tag = 101
        mySlider.tintColor = UIColor.green
        mySlider.minimumTrackTintColor = UIColor.black
        mySlider.maximumTrackTintColor = UIColor.red
        mySlider.minimumValueImage = UIImage(named: "ic_launcher")
        mySlider.maximumValueImage = UIImage(named: "ic_launcher")
        mySlider.setThumbImage(UIImage(named: "ic_launcher"), for: UIControl.State.normal)
        mySlider.addTarget(self, action: #selector(ViewController.mySliderValueChanged(_:)), for: .valueChanged)
        self.view.addSubview(mySlider)
    }
}

In the above code, we’ve added a programmatically created UISlider at the top of our layout.
We’ve set the UIImage from the Assets folder.

To differentiate between the two UISliders we’ve set a tag on one of them.
The value displayed on the Label would be of the type.

The output of the application in action is given below:

The values are displayed as a Float.

In order to make them snap to an integer, we can do the following in our above Swift class.

 @IBAction func mySliderValueChanged(_ sender: Any) {
        let uiSlider = sender as! UISlider
        let step:Float = 1
        let roundedStepValue = round(uiSlider.value / step) * step
        uiSlider.value = roundedStepValue
        if (sender as! UISlider).tag == 101{
            myLabel.text = ("Programmatic Slider value is: ((uiSlider).value)")
        }
        else{
            myLabel.text = ("Slider value is: ((uiSlider).value)")
        }
    }

The output now looks like:

That brings an end to this tutorial. You can download the project from the link below: