Slider in iOS Swift - Mini App: Build & Ship

Build: Volume Control

This screen lets the user adjust the volume using a slider. The current volume value is shown above the slider.

Target UI

-----------------------
| Volume Control       |
|---------------------|
| Volume: 50          |
|                     |
| [----------O-------] |
|                     |
|                     |
-----------------------

Add a UISlider that ranges from 0 to 100.

Display the current slider value as an integer above the slider.

Update the displayed value in real-time as the slider moves.

Starter Code

iOS Swift

import UIKit

class VolumeControlViewController: UIViewController {

    let volumeLabel = UILabel()
    let volumeSlider = UISlider()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        volumeLabel.textAlignment = .center
        volumeLabel.font = UIFont.systemFont(ofSize: 24)
        volumeLabel.text = "Volume: 50"

        volumeSlider.minimumValue = 0
        volumeSlider.maximumValue = 100
        volumeSlider.value = 50

        // TODO: Add target for slider value change

        volumeLabel.translatesAutoresizingMaskIntoConstraints = false
        volumeSlider.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(volumeLabel)
        view.addSubview(volumeSlider)

        NSLayoutConstraint.activate([
            volumeLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            volumeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            volumeSlider.topAnchor.constraint(equalTo: volumeLabel.bottomAnchor, constant: 20),
            volumeSlider.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40),
            volumeSlider.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40)
        ])
    }

Task 1

Task 2

Solution

iOS Swift

import UIKit

class VolumeControlViewController: UIViewController {

    let volumeLabel = UILabel()
    let volumeSlider = UISlider()

    override func viewDidLoad() {
        super.viewDidLoad()
        view.backgroundColor = .systemBackground

        volumeLabel.textAlignment = .center
        volumeLabel.font = UIFont.systemFont(ofSize: 24)
        volumeLabel.text = "Volume: 50"

        volumeSlider.minimumValue = 0
        volumeSlider.maximumValue = 100
        volumeSlider.value = 50
        volumeSlider.addTarget(self, action: #selector(sliderValueChanged(_:)), for: .valueChanged)

        volumeLabel.translatesAutoresizingMaskIntoConstraints = false
        volumeSlider.translatesAutoresizingMaskIntoConstraints = false

        view.addSubview(volumeLabel)
        view.addSubview(volumeSlider)

        NSLayoutConstraint.activate([
            volumeLabel.topAnchor.constraint(equalTo: view.safeAreaLayoutGuide.topAnchor, constant: 40),
            volumeLabel.centerXAnchor.constraint(equalTo: view.centerXAnchor),

            volumeSlider.topAnchor.constraint(equalTo: volumeLabel.bottomAnchor, constant: 20),
            volumeSlider.leadingAnchor.constraint(equalTo: view.leadingAnchor, constant: 40),
            volumeSlider.trailingAnchor.constraint(equalTo: view.trailingAnchor, constant: -40)
        ])
    }

    @objc func sliderValueChanged(_ sender: UISlider) {
        let currentValue = Int(sender.value)
        volumeLabel.text = "Volume: \(currentValue)"
    }
}

We added a target to the slider that calls sliderValueChanged whenever the slider moves. This method converts the slider's float value to an integer and updates the label text to show the current volume. This way, the user sees the volume number change live as they slide.

Final Result

Completed Screen

-----------------------
| Volume Control       |
|---------------------|
| Volume: 75          |
|                     |
| [-------------O----] |
|                     |
|                     |
-----------------------

User drags the slider thumb left or right.

The volume label above updates instantly to show the new integer value.

Stretch Goal

Add a mute button below the slider that sets the volume to 0 and updates the label.

💡 Hint

Add a UIButton, place it below the slider, and connect its action to set slider.value = 0 and update the label.