Updating One Slider Affects the Other: Using Combine in SwiftUI

Discover how to seamlessly update multiple sliders in SwiftUI with Combine while avoiding circular dependencies.
---

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: Combine: update values each other

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Updating One Slider Affects the Other: Using Combine in SwiftUI

When creating user interfaces in SwiftUI, you might want to implement slider elements that are interdependent. Imagine being able to adjust one slider, which automatically updates the value of another slider. However, achieving this can be complex and might lead to complications, such as circular dependencies. In this post, we'll explore how to effectively use Combine to synchronize two sliders in SwiftUI without falling into this trap.

The Problem: Circular Dependencies

When we initially attempt to update multiple sliders, as seen in the following code snippet, we face a common issue: if each slider updates the other, we create a circular dependency that leads to unexpected behavior. Considerable confusion can arise when trying to manage such interactions.

Here's a simplified version of what the initial code looks like:

[[See Video to Reveal this Text or Code Snippet]]

As mentioned, when you uncomment the second sink, it creates a loop since each value is dependent on the other.

The Solution: Custom Binding

To solve this issue effectively, we need to store only one value and use a custom binding for the other. This way, we bypass the need for a second published property and maintain a clean and closure-based relationship between the values. Here’s how we can implement this:

Step 1: Simplifying the Model

Instead of updating two separate published properties, we'll keep just one. Here's how the updated SizeValueModel would look:

[[See Video to Reveal this Text or Code Snippet]]

Step 2: Adjusting the View

Next, we need to modify the ContentView to reflect these changes. We will link the sliders accordingly:

[[See Video to Reveal this Text or Code Snippet]]

Step 3: Understanding the Flow

When you move the centimeters slider, it directly updates its value.

The inchesBinding computes and binds the corresponding inches value without the need for a separate property, effectively preventing any circular dependency from occurring.

Conclusion

By utilizing a custom binding and storing just one of the values, you can effectively synchronize multiple sliders in SwiftUI using Combine. This approach maintains a clean code structure and enables smooth user interactions without introducing bugs from circular dependencies. Now you're equipped to create more dynamic user interfaces with SwiftUI and Combine—enjoy building!