Here’s an example of how to use slider buttons in your iOS apps to adjust values ​​(such as light, brightness, or volume).

IOS UI slider buttons

The iOS slider buttons are actually a horizontal bar with a marker that you can swipe left or right with your finger to adjust a feature between its minimum and maximum values. Generally, these buttons are used to adjust the brightness of the screen or the volume of the device speaker; Their appearance is as follows:

By adding a UISlider class reference, we can also use these slider buttons in our iOS apps.

Now with an example; We will see how we can use UI sliders in our iOS apps.

Create iOS UI slider buttons in Swift

To create a new project in Xcode on iOS, open Xcode from the application folder list. After opening Xcode, the welcome window will open as shown below. In the Welcome window, click on the second option, “Create a new Xcode Project”; Click (create a new Xcode Project) or select the File New Project path.

After selecting “Create a new Xcode project”, a new window will open in which we must select our template.

The new Xcode window includes several built-in application templates to implement the usual type of iOS apps, such as page-based apps, tab-based apps, games, spreadsheet apps, and more. These templates have a preset interface and source code files. .

For example, the iOS Slider Button app is one of the most basic of the app’s “demo-only app”; We will use. To select this item, go to the iOS section on the left, select the application from the select section, and in the main part of the window that opens, select “single view application” and click on the next button, as shown below. .

After clicking Next, we will see a window like the one below, in this case we have to mention the project name and other details for our program.

Product name: “Image View in iOS”

The name we enter in the Product Name section is used for the project and application.

Organization name: “Tutlane”

You can enter the name of the organization or your name in this field; Of course you can leave that section blank.

Organization Identifier): “com.developersocociety)”

If you do not have an enterprise ID, enter com.example.

Bundle Identifier

This section is automatically generated based on the phrases we entered in the product name and organization ID.

Language: “Swift”

Select the language type “Swift” because we want to develop applications using swift.

Universal (devices): “Universal”

Select the Devices option as Universal This means that this app is for all Apple devices; If you need to run the app for iPad only, you can select the iPad option to restrict your app to running only on iPad devices.

Use core Data: Not selected

This option is used for database operations. Select this option if you are doing any database-related operations in your application, otherwise do not select this option.

Include Unit Test: Not selected

If you need unit tests for your application, select this option otherwise leave it unselected.

Includes UI tests: not selected

Select this option if you need UI tests for your application, otherwise do not select it.

After completing the options, click the Next button as shown below.

When we click the Next button; A new window will open in which you must use the location where you want the new project to be saved; Let’s choose. Once you have selected the new project storage location; As shown below; Click the Create button.

After clicking the Create button, Xcode opens and creates a new project. In our project, Main.storyboard and ViewController.swift are the main files used to design the user interface and maintain the source code.

Main.storyboard – which is the visual interface editor and this file is used to design the application interface.

ViewController.swift – which contains the source code of our application and we use this file to write any code related to our application.

Now select the Main.storyboard file in the project, until Xcode opens the visual interface editor as shown below.

Now select the ViewContrller.swift file in your project, which will look like the following:

Add iOS UI controls to the Swift view

We are now adding controls to our application for that library of available objects. The object library appears at the bottom right of Xcode. If you did not find the object library, as shown below; Click the button that is the third button in the library selection bar on the left. (On the other hand, you can select the View Utilities Show Object Library path).

As mentioned earlier; Our interface will be in the Main.storybord file so open the Main.storyboard file. Now in the Object Library Search section, search for the Slider filter section, then drag and drop the slider control to the ViewController section in the Main.storyboard; Similarly, we need to add a button control to the ViewController similar to the one below.

Linking iOS UI controls to coding in Swift

We now establish the connection between the controls and the ViewController.Swift code. To do this, click on the Assistant button, which is located in the right corner of the Xcode toolbar, similar to the figure below, and is in the form of two intertwined circles.

To map controls; Hold down the Ctrl key on the keyboard and look like the figure below; Drag the slider and button controls from the interface and drop them into the ViewController.swift file.

When we added the controls to the ViewController.swift file; To display the slider value in the button control, we have to write custom codes while moving the button indicator between the minimum and maximum values. When we have written all the required functions;

 The code of the ViewController.swift file will be similar to the following.

Import UIKit

Class ViewController: UIViewController {

@IBOutlet weak var slider: UISlider!

@IBOutlet weak var button1: UILabel!

@IBAction func sliderValueChange (sender: Any0bject) {

let currentValue = Int (slider.value)

button1. text = “\ (currentValue)”.

}

Override func viewDidLoad () {

Super. viewDidLoad ()

// Do any additional setup after loading the view, typically from a nib.

}

Override func didReceiveMemoryWarning () {

Super.didRecieveMemoryWarning ()

// Dispose of any resources that can be recreated.

}

}

Now run the program and implement its output. To implement the program; Select the required emulator (in this section we selected the iPhone Six Plus S) and click the Play button; Which is similar to the one below in the upper corner of the Xcode toolbar.

IOS slider output in Swift language

In the following; You can see the result of running the iOS slider application. Now slide the slider indicator from left to right and right to left to display the same button control below. P

This way we can use the ui sliders in our iOS apps to change the size of a certain value from minimum to maximum. These buttons consist of a horizontal bar and a cursor.