Tick marks for sliders had been added in iOS 26, as described within the SwiftUI updates for June 2025:
Slider now helps tick marks. Tick marks seem routinely when initializing a Slider with the step parameter.
As well as, some new init variants had been added to Slider in iOS 26. These init variants make it doable to customise the ticks for the slider.
For instance, init(worth:in:step:neutralValue:enabledBounds:label:currentValueLabel:minimumValueLabel:maximumValueLabel:tick:onEditingChanged:) can be utilized along with a step parameter. The documentation for this explicit init variant says:
Creates a slider to pick out a price from a given vary, topic to a step increment, which shows the offered labels and customizable ticks.
It appears to me that the one tick customization that this makes doable is to vary the (non-visible) labels related to the ticks. This may maybe be helpful for accessibility. Nevertheless, I’m questioning if the ticks will be modified in a visible means too, even when it’s only to omit among the ticks?
For instance, the code beneath creates a slider over the vary 0…1000 with a step measurement of 1. This makes use of the init variant init(worth:in:step:label:onEditingChanged:), obtainable since iOS 13:
struct ContentView: View {
@State personal var worth = 500.0
var physique: some View {
Slider(
worth: $worth,
in: 0...1000,
step: 1,
label: { Textual content("Worth") }
)
.padding(.horizontal)
.padding(.vertical, 40)
.overlay(alignment: .prime) {
Textual content("(Int(worth.rounded()))")
}
}
}
Because of the small step measurement, the ticks are very shut collectively and merge right into a stable line when operating on an iPhone show:
It might be good to have the ability to distinguish between main ticks, say at each 100, and minor ticks in a visible means, maybe with a unique shade or bigger measurement. It might at the very least assist, if minor ticks may very well be omitted altogether.
Right here is an try to make use of the brand new init variant described above to create a slider with step measurement of 1, however with tick marks just for values that are multiples of 100:
Slider(
worth: $worth,
in: 0...1000,
step: 1,
label: { Textual content("Worth") },
tick: { val in
val.truncatingRemainder(dividingBy: 100) == 0 ? SliderTick(val) : nil
}
)
The additional tick closure appears to make completely no distinction, the ticks look precisely the identical as earlier than.
How can the ticks for a Slider be personalized in a visible means utilizing any of the brand new init variants?
