Swift Components Tour – UISlider

In this lesson

  • UISlider basics
Kyle Roberts
Swift Guru at Large

Kyle's Series


Tap on time to skip ahead


Hi, Kyle here with Brax.tv and we’re back on the Swift Components Tour. This stop is sliders. This screen may look familiar back in the NimbleNoggin.io theater, but this time we’re using UISlider instead of UISwitches to control the lights.


A UISlider is a dot on a line. You move the dot around and can get the event of the dot changing on the line and running code based on the value of where the dot is on that line. Probably most commonly seen on iOS Brightness control, either in the settings app or swiping up from the bottom of your screen in that action menu there. Before with the switches we just toggled the lights on and off, but now we can gradually bring them up and down, on and off, left and right, in and out with the slider. If I move the house lights slider about halfway, you can see that the “house lights” are about halfway up. Here they look great because it’s just combining the black background switching to the white background. When we turn them all the way up, it will turn the background completely white. I know before I mentioned that we’re not about wasting energy but you can actually, in this view controller, have the house lights and the spotlights on at the same time.


So, how about that storyboard. It looks pretty much identical, and in fact it is pretty much identical to the switch scene storyboard. Except, I’ve replaced the top switch with a UISlider and replaced the bottom button with a label and a UISlider. Nothing much new to cover here.


Here we have a reference to both sliders and both of the labels above those sliders. Again we have a reference to both spotlights and the left and right constraints of their respective spotlights. Again, in viewDidLoad, just some setup for the shadows on those labels. Flipping the right spotlight again so that it faces inward and then moving them both off of the screen.


Here is an example of the IBAction commonly used with a UISlider, which is on the value change event. Say you tap on the dot, you move it and let go, it’s not only called when you let go, it’s called many times per second as you drag the dot along the values. You can tell this because, for example with this house lights slider, we’re controlling the transition from black to white background fluidly as we move the slider value and not, say, animating it from black to white when we turn it all the way. Or vice versa when we turn it all the way down.


What we’re doing in the code is I reworked the turn on and off spotlights method and turn on and off house lights method, to accept a value between zero and one. Either move the spotlights to that percentage of all the way on to all the way off, or set the house lights to that percentage of on to off, or white to black. Thanks for watching!