Multiple Options for Ternary Operators

#11 - How to expand from two to three color changes

God day SwiftUI Learner,

Welcome back to another issue of Learning SwiftUI. This is release number eleven. I hope you had a great weekend. Personally I am really enjoying it so far, we have a holiday here in Sweden on Monday. Can’t complain when the weekend gets expanded with one more day, hopefully I will get some time over for iOS development.

During the week I have been working on my sportsbet app, this is the first app I am building that I intend to release to the App Store. The reason for building this app is to force myself to leave the comfort zone of doing animations and actually get better at handling data. So we will see how long it takes me to finish it. You can follow that progress on my Twitter.

In this issue we will go through how you can change between more than two colors for a ternary operator. If you want to learn more on this subject you can read this post. This week’s issue will be a rather short one as I have been away on training courses at work during the week so I’ve had limited time to focus on the Learning SwiftUI newsletter. But I wanted to share this little ternary operator tip with you all. In this case we will use it on a slider.

So let’s dig in!

Click the link to my twitter below to see what we’ll achieve today.

Link to video

You can change the color on a slider by using the tint modifier. In the example below we have changed the color of the slider from the default blue color to yellow.

struct MultipleTernaryOperators: View {
    @State private var value: CGFloat = 50.0
    
    var body: some View {
        VStack {
            Slider(value: $value, in: 0...100)
                .tint(.yellow)
        }
        .padding()
    }
}

As you can see, the color is now yellow for the slider, which is pretty awesome. If you want to change the color based on a value, you can add a ternary operator to the tint. Here is an example of that:

struct MultipleTernaryOperators: View {
    @State private var value: CGFloat = 0
    
    var body: some View {
        VStack {
            Slider(value: $value, in: 0...100)
                .tint(value >= 51 ? .red : .blue)
        }
        .padding()
    }
}

---

Want to learn more about SwiftUI animations?

I created a book for anyone new to SwiftUI that wants to develop their SwiftUI animation skills. The book cover the basics and more advance techniques to animating objects and views in SwiftUI. You can check it out by clicking the link below:

Learning SwiftUI Animations - The Beginner Roadtrip

---

Now if you drag the slider around, it will change between the color red and blue every time the slider passes value 51.

Now to achieve the result presented in the twitter link at the beginning of this post. We just need to adjust our code a little bit so it can change between three colors instead.

struct MultipleTernaryOperators: View {
    @State private var value: CGFloat = 0.0
    
    var body: some View {
        VStack {
            Slider(value: $value, in: 0...100)
                .tint(value <= 20.0 ? .red : (value >= 70.0 ? .green : .yellow))
        }
        .padding()
    }
}

And voila, this code will have the slider change between three different colors once you drag it from 0 to 100. Personally I like this little solution very much.

That was it from me this week, hope you learned something new.

Have a great day!

/Mr SwiftUI