Tick marks for sliders have 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 have 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 supplied 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 would possibly maybe be helpful for accessibility. Nonetheless, I’m questioning if the ticks will be modified in a visible means too, even when it is just to omit a number of the ticks?
For example, 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:), out there since iOS 13:
struct ContentView: View {
@State non-public 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: .high) {
Textual content("(Int(worth.rounded()))")
}
}
}
As a result of small step measurement, the ticks are very shut collectively and merge right into a strong line when operating on an iPhone show:
It will 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 distinct coloration or bigger measurement. It will not less than 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?
