How customise Slider blue line in SwiftUI?
As pointed out in other answers you have limited ability to customize a Slider
in SwiftUI. You can change the .accentColor(.red)
but that only changes the minimumTrackTintColor.
Example of a Slider
with .accentColor(.red)
Additionally, you can't change other things like thumbTintColor.
If you want more customization than just minimumTrackTintColor
that you have no choice but to use a UISlider
in SwiftUI
as rob mayoff stated.
Here is some code on how you can use a UISlider
in SwiftUI
struct SwiftUISlider: UIViewRepresentable {
final class Coordinator: NSObject {
// The class property value is a binding: It’s a reference to the SwiftUISlider
// value, which receives a reference to a @State variable value in ContentView.
var value: Binding<Double>
// Create the binding when you initialize the Coordinator
init(value: Binding<Double>) {
self.value = value
}
// Create a valueChanged(_:) action
@objc func valueChanged(_ sender: UISlider) {
self.value.wrappedValue = Double(sender.value)
}
}
var thumbColor: UIColor = .white
var minTrackColor: UIColor?
var maxTrackColor: UIColor?
@Binding var value: Double
func makeUIView(context: Context) -> UISlider {
let slider = UISlider(frame: .zero)
slider.thumbTintColor = thumbColor
slider.minimumTrackTintColor = minTrackColor
slider.maximumTrackTintColor = maxTrackColor
slider.value = Float(value)
slider.addTarget(
context.coordinator,
action: #selector(Coordinator.valueChanged(_:)),
for: .valueChanged
)
return slider
}
func updateUIView(_ uiView: UISlider, context: Context) {
// Coordinating data between UIView and SwiftUI view
uiView.value = Float(self.value)
}
func makeCoordinator() -> SwiftUISlider.Coordinator {
Coordinator(value: $value)
}
}
#if DEBUG
struct SwiftUISlider_Previews: PreviewProvider {
static var previews: some View {
SwiftUISlider(
thumbColor: .white,
minTrackColor: .blue,
maxTrackColor: .green,
value: .constant(0.5)
)
}
}
#endif
Then you can use this slider in your ContentView
like this:
struct ContentView: View {
@State var sliderValue: Double = 0.5
var body: some View {
VStack {
Text("SliderValue: \(sliderValue)")
// Slider(value: $sliderValue).accentColor(.red).padding(.horizontal)
SwiftUISlider(
thumbColor: .green,
minTrackColor: .red,
maxTrackColor: .blue,
value: $sliderValue
).padding(.horizontal)
}
}
}
Example:
Link to full project
As of Apple's 2021 platforms, you can use the tint
modifier to change the color of the track to the left of the slider knob. Beyond that, SwiftUI's Slider
doesn't let you customize its appearance.
If you need more customization, then for now your only option is to create a UISlider
and wrap it in a UIViewRepresentable
. Work through the “Interfacing with UIKit” tutorial and watch WWDC 2019 Session 231: Integrating SwiftUI to learn how to use UIViewRepresentable
.
The Slider
documentation formerly mentioned a type named SliderStyle
, but there is no documentation for SliderStyle
and the type is not actually defined in the public interface of the SwiftUI framework as of Xcode 11 beta 4. It is possible that it will appear in a later release. It is also possible that we will have to wait for a future (after 13) version of SwiftUI for this ability.
If SliderStyle
does appear, it might allow you to customize the appearance of a Slider
in the same way that ButtonStyle
lets you customize the appearance of Button
—by assuming total responsibility for drawing it. So you might want to look for ButtonStyle
tutorials on the net if you want to get a head start.
But SliderStyle
might end up being more like TextFieldStyle
. Apple provides a small number of TextFieldStyle
s for you to choose from, but you cannot define your own.