Sliders enable users to change a value by sliding a ticker back and forth. Progress bars are for displaying the progress of a task. See how to use both in this video.
- [Instructor] A slider component allows you to click and drag a slider on the screen. You can control whether you want to have an object be updated as the slider moves. Let's take a look at how that works. I'll open up the Library and bring out a slider onto the screen. I'll just stretch the handle on the right to have it fill the width of the screen. Then I'll open up the Library again, filter for a label this time, press the Return key to drop one on the screen and I'll place it right about here, stretch it out just a little bit.
Now I'll Shift-click the slider and then press Shift-Option-Command and equals to have X-Code create some constraints for me. Now let's connect these objects to code by Option-clicking ViewController.swift, and then right-clicking and dragging the label into the code underneath your declaration of ViewController. We'll call this label, and hit Connect or Return. So there's our label property right there, and then for the slider, rather than creating a property for it, we're going to handle the slider changed event.
So right-click and drag from the slider below viewDidLoad, and make sure you have action for the connection. For name, we'll call this sliderValueChanged. For the type, hit the drop-down and choose UISlider because we want to have a reference to the slider. We can actually get that reference through this event rather than creating a property like we did for the label. Of course, you can also create a property if you want, but this way, it allows you to have less code.
For the event you want valueChanged, which is triggered as the value of the slider changes. Hit the Connect button, and you should see the method there. Let's return to the standard editor and take a look at the settings that you have for the slider in the Attributes Inspector. So select the slider, go to the Attributes Inspector, so show the right area, click on the Attributes Inspector in the inspector bar, and you can see the different options that you can modify with the slider. So you can modify the starting value, you can modify the minimum and maximum values, you can even customize images for the slider, if you want.
For now, all I'm going to do is set the value to 0.5, set the minimum to zero, and the maximum to one. This will give us a percentage value between zero and one. This is normally standard if you're going to have a user interface object like this. But, of course, you can customize it if you want, as we've already looked at. Let's head over to our code in viewController.swift. I'll hide the right area of the screen and insider of SliderValueChanged, I'm going to place that value inside of the label.
You'll notice that the value comes in as a parameter named sender. The data type of that is a UISlider. So let's put that value inside of the label string. So, Label.text, we set it equal to a string, and inside of the string back-slash and parentheses, sender, which is our slider, .value. Now let's run the app and see what we get.
There's our label on the slider. Click and drag the slider, and watch the label update. There we go! So if you ever want to use a slider in your application, handle that valueChanged event and do whatever you want with the slider's data inside of it.
- Alert controllers and actions
- Sliders, progress bars, and switches
- Creating UI elements with code
- Displaying web content with Safari view controllers and WKWebView
- Creating collection view controllers
- Creating tabbed apps
- Publishing your app with App Store Connect