Change Slider Color in SwiftUI

SwiftUI provides developers with a Slider control that can be used to create a slider. In this tutorial, I am going to let you know how you can change the SwiftUI Slider color.

If you create a slider in the simplest possible way, you can see that the default color of the slider is blue as you can see in the figure below:

How to change the color of the SwiftUI Slider control

You may want the color of the slider other than blue. So to change the default blue color of the slider, you have to do something. Luckily, SwiftUI provides us tint() and accentColor() that can help us to change the color of the slider.

Note that, SwiftUI provides us with very limited options to customize the default Slider control.

Using tint() method

Below is how to use the tint() method to set the slider color to green:

            Slider(value: $volume, in: 0...100, step: 1)
                .tint(Color.green)

Below is how the slider will look like:

Using accentColor() method

We can use the accentColor() method as you can see below to change the color of the SwiftUI slider to yellow:

            Slider(value: $volume, in: 0...100, step: 1)
                .accentColor(Color.yellow)
            

Now our slider color has been changed to yellow:

By Faruque Ahamed Mollick