'How would you draw a node in the slider track in swiftUI/Swift?
How would you draw a node/bubble in the slider track in swiftUI/Swift? Needed 10 nodes for 10 values. I took the help of the png (if that helps) and it moves perfectly fine (jumps from one node to another), however, I also need the track background colour along with these nodes. Not sure how to do it.
Hyperlinking the demo for what I've been looking for
This is what I did.
let trackingImage = UIImage(named:"bubbles")!
func makeUIView(context: Context) -> UISlider {
let slider = UISlider(frame: .zero)
slider.thumbTintColor = thumbColor
slider.minimumTrackTintColor = minTrackColor
slider.maximumTrackTintColor = maxTrackColor
slider.value = Float(value)
slider.minimumValue = 0
slider.maximumValue = 9
slider.setMinimumTrackImage(trackingImage, for:.normal)
slider.setMaximumTrackImage(trackingImage, for:.normal)
slider.minimumTrackTintColor = .systemBlue
slider.addTarget(
context.coordinator,
action: #selector(Coordinator.valueChanged(_:)),
for: .valueChanged
)
return slider
}
Solution 1:[1]
This will sound very naive, but to answer my own question, I've simply added the image of that type (bar and circle/node together) by setting the image to setMinimumTrackImage and setMaximumTrackImage image.
let trackingImage = UIImage(named:"slider_unselected")!
let trackedImage = UIImage(named:"selectedTracl82")!
@Binding var value: Int
func makeUIView(context: Context) -> UISlider {
let slider = UISlider(frame: .zero)
slider.thumbTintColor = thumbColor
slider.minimumTrackTintColor = minTrackColor
slider.value = Float(value)
slider.minimumValue = 0
slider.maximumValue = 9
slider.setMinimumTrackImage(trackedImage, for:.normal)
slider.setMaximumTrackImage(trackingImage, for:.normal)
Posted in case somebody might get into same issue.
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 |
