'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