Slider min and max tracks not aligned.

[OlivierHartmann]

Is there an existing issue for this?

• I have searched the existing issues

Explain what you did

Hi,
I've migrated from expo 52 to expo 53, meaning to React 19.0.0, and so on.

But since the upgrade I have a problem with the Slider. The min track is not aligned with the max track anymore. It gives me that now on Android and iOS:

While on web it's still the good expected behavior :

Expected behavior

Same result than on web, with the min track over the max track.

Describe the bug

the min track is not aligned with the max track anymore

Steps To Reproduce

I'm using a slider like that :

<Slider
	disabled={disabled}
	style={[
		{
			width: "100%",
			justifyContent: "center",
			alignItems: "stretch",
		},
		{ opacity: typedAnswer.answered ? 1 : 0.5 },
	]}
	value={2}
	step={1}
	onValueChange={onValueChange}
	maximumValue={5}
	minimumValue={0}
	allowTouchTrack={!disabled}
	minimumTrackTintColor={"purple"}
	maximumTrackTintColor={"green"}
	trackStyle={{ height: 15, borderRadius: 16 }}
	thumbStyle={{ height: 44, width: 13, borderRadius: 2, backgroundColor: "pink" }}
/>

Screenshots

No response

Your Environment

I'm using the latest :

	"@rn-vui/base": "^5.1.10",
	"@rn-vui/themed": "^5.1.10",

I tried to downgrade to 5.0.0, and even back to rneui 4.0.0.rc... But still the same. It looks like a design problem of the component.

[github-actions]

Hey! Thanks for opening the issue. The issue doesn't seem to contain a link to a repro (a snack.expo.dev link or link to a GitHub repo under your username). Can you provide a minimal repro which demonstrates the issue? A repro will help us debug the issue faster. Please try to keep the repro as small as possible and make sure that we can run it without additional setup.

[deepktp]

Hii, @OlivierHartmann we are working on to upgrade the library to expo 53, it will take some time for us to work on this issue and release a version with fix.

I have a patch that worked for me,

Go to node_modules/@rn-vui/base/dist/Slider/Slider.js and update constant TRACK_STYLE at line 18 with value 0.

- const TRACK_STYLE = Platform.select({ web: 0, default: -1 });
+ const TRACK_STYLE = 0;

if you need it for web also you need to modify line 34

- const handleMoveShouldSetPanResponder = () => !TRACK_STYLE;
+ const handleMoveShouldSetPanResponder = () => Platform.select({ web: false, default: true });

[OlivierHartmann]

Amazing ! Thank you very much for this fast answer and all your work on this project !

[tsfento]

For those not wanting to patch their node_modules, another possible temporary workaround is to manually set the margins on trackStyle. For instance, in my case I set both the trackStyle (and thumbStyle since this made it offset) marginTops to -10 and everything lined up perfectly. Thanks for maintaining this library.