Initial Thumb Position is wrong when initial value is greater than 365

[McFly78]

Environment

System:
OS: macOS 13.1
CPU: (8) arm64 Apple M1 Pro
Memory: 162.08 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.6.0 - /opt/homebrew/bin/node
Yarn: Not Found
npm: 8.13.2 - /opt/homebrew/bin/npm
Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.3 => 0.67.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

Description

Hi,

Since v4.2.4 the initial position of the thumb is wrong if the initial value is greater than 365 on IOS.
I didn't do the test on Android.

It seems that if initial value is greater than 365 the slide component always takes initial value 365.

For example, with the below code the thumb is in the middle of the slider instead of being at the end.
The thumb position is then fine for next renders update.

<Slider minimumValue={0} maximumValue={730} value={730} />

[BartoszKlonowski]

Hello @McFly78,
Unfortunately, I wasn't able to reproduce the issue you describe. Can you provide me with some more information regarding the version you are using of both Slider and react-native? Also, can you check whether this issue is still observed on the latest version on your side?

[McFly78]

Hello @BartoszKlonowski,

I am in React Native 0.67.3.

I tested several releases from 4.2.4 to 4.4.2 and I have the same issue.
4.2.3 version and below versions are working fine as expected.

The position of the thumb is only wrong when the Slider component initializes (first render).
The position is then OK for next renders.

It seems that the bug depends on the number of Slider props we use.
Could you please try testing the following code with more Slider props ?
When testing on my side the thumb is in the middle of the slider instead of being at the end (only for first render).

<Slider
  minimumValue={0}
  maximumValue={730}
  value={730}
  step={1}
  tapToSeek={false}
/>

My Environment

System:
OS: macOS 13.1
CPU: (8) arm64 Apple M1 Pro
Memory: 870.72 MB / 32.00 GB
Shell: 5.8.1 - /bin/zsh
Binaries:
Node: 18.6.0 - /opt/homebrew/bin/node
Yarn: Not Found
npm: 8.13.2 - /opt/homebrew/bin/npm
Watchman: 2022.07.04.00 - /opt/homebrew/bin/watchman
Managers:
CocoaPods: 1.11.3 - /opt/homebrew/bin/pod
SDKs:
iOS SDK:
Platforms: DriverKit 22.2, iOS 16.2, macOS 13.1, tvOS 16.1, watchOS 9.1
Android SDK: Not Found
IDEs:
Android Studio: 2021.2 AI-212.5712.43.2112.8609683
Xcode: 14.2/14C18 - /usr/bin/xcodebuild
Languages:
Java: 11.0.16 - /usr/bin/javac
npmPackages:
@react-native-community/cli: Not Found
react: 17.0.2 => 17.0.2
react-native: 0.67.3 => 0.67.3
react-native-macos: Not Found
npmGlobalPackages:
react-native: Not Found

[BartoszKlonowski]

Hello @McFly78,
I still can't reproduce the issue. Did you have a chance to retest it on the latest version of the Slider? Maybe you can post a link to a repro repository that I can clone and analyze?

[BartoszKlonowski]

Closing due to no reproduction possible, no repro example to work on and no author response.
Please let me know if issue is still valid.

[McFly78]

@BartoszKlonowski

Hi,
After upgrading to RN 0.71.13 and the latest version of the slider I was still having slider strange behaviours (since all versions higher than 4.2.3).

I found out what was the issue.

Basically I was doing a test using a conditional (ternary) operator to display slider 1 or slider 2.

Here is a basic example:
this.state.isSliderVisible ? <Slider minimumValue={0} maximumValue={100} value={0} /> : <Slider minimumValue={0} maximumValue={100} value={0} />

By doing this, modifying one slider modifies the second!
I think React thinks that the two sliders are the same component.
However, if the initial value of the second slider is different to that of the first, for example {1} instead of {0}, then the sliders appear to be independent as expected.

To solve the issue when using the versions higher than 4.2, I just added on my app a different key to each slider.

You can test the different behaviour using or not a key here:
Slider issue on Snack

• Move the first slider (green background)
• Then click on the button to display the second slider (red background)
• The position of the second slider will be the latest position of the first slider.