iOS Custom Slider Control

The user interface controls can make or break any application. UIControls in an iOS application help the users view and interact within an application. Apple supplies a toolbox with a set of pre-made controls, such as UISlider, UIButton and UISwitch that each have a distinct purpose in an application. Sometimes the pre-existing controls just cannot do what we need out of the box. Sometimes we need to add new functionalities to existing controls by creating a custom control. A custom control class can be difficult at times to create and maintain but it can also be very rewarding.

Notice how the custom slider contains two buttons. The button on the left(-) is the decrement button and on the opposite side(+) is the increment button. When one of these buttons are pressed and released the slider value is then incremented or decremented by the custom sliders set increment value. If you were to press and hold one of these buttons then the slider would continuously increase or decrease by the set increment value for the slider. In this demonstration, you will be able to follow along and make your very own custom slider control.

Starting Off

Fire up Xcode. Go to File>New>Project, select the iOS>Application>Single View Application template and click Next. On the next screen, enter the product name, choose your desired Organization Name and Organization Identifier, then make sure that Swift is selected as the language, iPhone is selected as the Device and that Use Core Data is not selected.

Now with you new project open on the left in the Navigator pane you will see files and folders. Go to the folder with the name of you project and right click and choose New File>iOS>Source>Cocoa Touch Class and click Next. For Class enter "myCustomSlider" or whatever you want you slider control to be named. Next we will choose to make this class a Subclass of UISlider so that we can inherit and override methods from the parent. Then click Next and Create.

Then myCustomSlider.swift file is pretty empty but contains the following code:

which tells us that are new control "myCustomSlider" inherits from UISlider, which is okay because we want to maintain the basic slider behavior.

Adding UILabel to Slider

Now before we jump into adding buttons on each side of the slider I must go over this code briefly. As shown in the code above I created 4 properties for our custom control class all starting with the word label. The variable label is of type object UILabel and the min and max attributes are used to find length and set the position of label. Now labelText syntax might look a little strange but that is just saying when you call labelText() it returns the current value that its set to or it returns "".

Located in the our custom control initializer function we initialize label by setting it equal to UILabel() before the superview gets initialized. After the superview is initialized we add a target to our control and that sends us to "onValuedChanged:" function for the control event ValueChanged. So whenever the slider value changes it calls that function.

The func setup() simply tells the label where to appear and what to display. The func updateLabel() is used to make sure we have the most updated label including its value, size and position.

By Overriding and adding setup() and updateLabel() to layoutSubviews() allows us to preform more precise layouts of our subviews.

Adding Buttons to Slider

In order to visually add buttons we will need to add certain properties to "myCustomSlider" control class. These properties will include the two UIButtons.

We can initialize these buttons by adding the following code to shown below

to the setup() function inside "myCustomClass".

The button functionality has not been added yet so when you click on either button nothing should change.

Adding Button Increment and Decrement Functionality

First we will need to add a variable to "myCustomSlider" that we want our slider to increment by and we add it using

Next we create the appropriate actions for the increment and decrement buttons and include them in "myCustomSlider" class object by adding the following functions

Now without adding the target to incBtn and decBtn those action functions will never be used. But to connect the buttons to the target action we can add these two lines of code to our setup() function.

There we have it our own custom slider control. To go about implementing this into your project, go to Project Navigator and click Main.storyboard and it should be blank since we have not added anything yet to it.

Then what you are going to want to do is drag a Slider control onto the view from Object Library. Then select the slider already on the view and navigate to Custom Class and select "myCustomSlider" to be this sliders custom class.

Connecting Control to ViewController

Now navigate to the Assistant Editor which is found in the box shown below.

If it does not pop up with the view controller, make sure the Assistant Editor is set to Automatic. Next we need to create an outlet for our control in the view controller so that they are able to communicate with each other. To make this connection hold control key and drag to view controller.

We have made the connection between the control and the View Controller and now its time to set the min and max values for our slider. We can do this in our ViewController by adding this code

customSlider.value = 5000 is the starting value of our slider and customSlider.incrementValue = 500 is set so that the the buttons will change the slider value by the amount of 500.

Now with all that included we can now build and run the project and try out our new custom control.