Livsy Code

Gauge vs ProgressView vs Slider in SwiftUI

Greetings, traveler!

When building data-driven interfaces in SwiftUI, you’ll often need to visualize or control a numeric value. Three native views can serve that purpose — Gauge, ProgressView, and Slider.
Although they may look similar at first glance, they differ significantly in intent and interaction.

Gauge — Displaying a Value Within a Range

Introduced in iOS 16, the Gauge view is designed to represent a value, not to let users change it.
It’s ideal when you need a read-only indicator, such as a battery level, temperature, or CPU usage.

Gauge(value: currentTemp, in: 0...100) {
    Text("Temperature")
} currentValueLabel: {
    Text("\(Int(currentTemp))°C")
}
.tint(.orange)

A gauge can appear in multiple styles (.linearCapacity, .accessoryCircular, and others) and adapts naturally to different layouts — from dashboard-style circular indicators to compact widgets.

Use Gauge when:

  • You need to visualize a measured value.
  • User interaction is not expected.
  • You want consistent styling with system widgets and complications.

ProgressView — Indicating Task Completion

ProgressView is for progress tracking rather than numeric display.
It shows how much of a task has completed, either deterministically (known fraction) or indeterminately (spinning indicator).

ProgressView(value: progress, total: 1.0)
    .tint(.green)

It fits well in upload/download screens, onboarding flows, or long-running operations.
A key difference from Gauge is context — the value doesn’t represent a real-world measurement but rather a process state.

Use ProgressView when:

  • You visualize completion percentage of a task.
  • The value always moves forward toward 100%.
  • You want system-standard animations and accessibility feedback.

Slider — Providing Direct User Control

Unlike Gauge and ProgressView, a Slider enables input.
It’s the right choice when you want the user to set or adjust a numeric value, such as brightness, volume, or filter intensity.

Slider(value: $volume, in: 0...100) {
    Text("Volume")
}
.tint(.blue)

Slider directly binds to a state property via Binding, making it the go-to option for any interactive numeric adjustment.

Use Slider when:

  • The user must modify the value.
  • Feedback should be immediate and continuous.
  • You need to pair UI control with live updates (e.g., animations, previews).

Choosing the Right View

When deciding between the three:

  • Ask whether the value is measured, computed, or controlled by the user.
  • If it’s measured — use Gauge.
  • If it represents completion — use ProgressView.
  • If the user manipulates it — use Slider.

Each of these views follows Apple’s design principles of clarity and accessibility. Understanding their intent will help you craft interfaces that both look right and behave naturally within the SwiftUI ecosystem.

It might be interesting: