Skip to content

Release: version 6.0.0 - #848

Merged
BartoszKlonowski merged 48 commits into
mainfrom
release/version-6.0.0
Nov 5, 2026
Merged

BartoszKlonowski merged 48 commits into
mainfrom
release/version-6.0.0

Conversation

@BartoszKlonowski

@BartoszKlonowski BartoszKlonowski commented Oct 30, 2026 •

Copy link
Copy Markdown
Member

This release brings the Slider to Material Design 3 on Android, and SwiftUI on iOS.
Web and Windows are soon to follow.

The package moves to @callstack/slider, Android moves to Kotlin, Compose and Material 3, iOS moves to a 15.1 deployment target with SwiftUI. The example app loses its outdated screens and gains a README walking through the scenarios it keeps.

The old implementation wrapped the platform's control — AppCompatSeekBar on Android, UISlider on iOS — and reached whatever the control did not support by patching the wrapper: step markers rendered in JavaScript beside a native view whose width had to be measured first, a thumb tinted transparent so an overlay could stand in for it.
That ceiling is what this release removes. Both platforms are now built on the declarative toolkit of their own, so the features below live in the Slider itself rather than around it, and the JS layer shrinks to the parts that are only to provide the support for the feature, not the feature itself.

What the rewrite buys

  • Custom pieces are native children, not overlays. A thumb, a track or a stepMarkers component is mounted as a child of the Slider and placed in RNCSliderShadowNode::layout — thumbs centred on their value, step markers hung off the track, a custom track stretched to its length. The native view then moves those frames as the value changes, without asking JS for a relayout on every frame of a drag. Each host is pointerEvents="none", so a custom thumb never steals the drag from the Slider.
  • Both variants, one geometry. A single-thumb and a ranged Slider run through the same travel, snapping, hitbox and marker code — one RNCSliderGeometry on iOS, one set of track helpers on Android — the ranged variant only adding a second thumb. That is what let ranged mode come with the same behaviour on both platforms, rather than an approximation of it. That fixes Flicker on Initial Render Android #733
  • Props describe intent, not implementation. The codegen contract now carries what the Slider should do (ranged, step, orientation, lowerLimit, stepMarkers), and each platform decides how. Defaults are declared once, as CodegenTypes.WithDefault, so JS, Kotlin, Swift and C++ cannot disagree about them.
  • Events leave the bridge only when someone listens. All value and sliding handlers are codegen DirectEventHandlers, and JS passes a handler down only when one was given, so an idle Slider sends nothing across the bridge. The old onRNCSliderValueChange and onChange, both bubbling, are gone along with the re-emitting of values they relied on.
  • Decimal values stay decimal. Snapping rounds to the nearest multiple of the step at the decimal place the step is actually written at — in Kotlin, Swift and JS alike — so a step of 0.1 reports 0.3, not 0.30000000000000004. JS, iOS and Android agree on how many steps a range holds, including the last one when the step does not divide it evenly.
  • RTL follows the platform settings on both Android and iOS. Track fractions, thumb placement and marker positions are computed, matching how Material 3 and SwiftUI lays its own track out, rather than through a transform.
  • Screen readers talk to the platform's control. On iOS a thumb is an adjustable element reporting its value as a percentage, with increment and decrement handled natively; on Android the Compose slider brings its own semantics. A ranged slider exposes its two thumbs separately either way, which the single control behind v5 could not.
  • Slider in a native container stack Which fixes iOS: Slider sometimes does not mount at full width #745

What is included:

This allows the consistant approach to further customization
This is based on the native support of what Jetpack Compose provides
This aligns v6 with the legacy additional props from v5 API
When implementing the two thumb support, it was required to opt out of the
fully native thumb in favor of custom implementation.
However, as this custom implementation was based on vibe coded assummed
legacy solution, the thumb was left without the natively supported features.

This commit brings it back by implementing the custom liquid glass which
layout is based on thumb calculation and measurements.
The tapToSeek on iOS platform is true by default and cannot be set to false
The example app will run both natives and web platforms
which makes the separate example-web application no longer needed.
@BartoszKlonowski
BartoszKlonowski marked this pull request as draft October 30, 2026 14:41
@BartoszKlonowski BartoszKlonowski self-assigned this Oct 30, 2026
@BartoszKlonowski
BartoszKlonowski marked this pull request as ready for review November 3, 2026 14:06
@BartoszKlonowski
BartoszKlonowski merged commit 7bdf603 into main Nov 5, 2026
17 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

1 participant