In this tutorial, we’ll be discussing and implementing the UISlider in our iOS Application.
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.
minimumValueImageandmaximumValueImageare used to set the image at either end.minimumTrackTintColoris used to set the color of the track till the thumb’s current position.maximumTrackTintColoris used to set the color of the track from the current thumb position till the end of the track.thumbTintColoris used to set the tint color property on the thumb of the UISlidercurrentThumbImageis used to set the image to be rendered on the thumb.setThumbImageis 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.minimumValuemaximumValueis 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
@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: