Thumb flicker and jumps to 0 when Slider value is being set programmatically

[yedi97]

Description

I use Slider to make timeline for live stream from camera, but thumb has flickering and jump to 0 when value changes continuously in real time, this problem happens on IOS, android i have not tried

demo.error.mp4

Parent component:

<Timeline
            min={now - 60 * 60 * 1000}
            max={now}
            slide={slide}
            onTouchStart={() => {
              setTimelineChange(true);
            }}
            onTouchEnd={() => console.log("touch end")}
            onSlidingStart={() => {
              setTimelineChange(true);
            }}
            onSlidingComplete={(val) => onSlideComplete(val)}
            onValueChange={() => setTimelineChange(true)}
          />

Timeline component:

const TimelineComp = ({
  slide = 0,
  onTouchEnd = () => {},
  onTouchStart = () => {},
  disabled = false,
  min = 0,
  max = 1,
  onSlidingComplete = () => {},
  onSlidingStart = () => {},
  onValueChange = () => {}
}) => {
  return (
    <Slider
      style={{ width: "100%", height: 40 }}
      minimumValue={min}
      maximumValue={max}
      minimumTrackTintColor={colors.WHITE}
      maximumTrackTintColor={colors.WHITE}
      value={slide}
      disabled={disabled}
      onTouchEnd={onTouchEnd}
      onTouchStart={onTouchStart}
      onSlidingComplete={onSlidingComplete}
      onSlidingStart={onSlidingStart}
      onValueChange={onValueChange}
      step={10}
    />
  );
};
export const Timeline = React.memo(TimelineComp);

Versions

"react: 18.3.1"
"react-Native: 0.76.6"
"@react-native-community/slider": "^4.5.6"

Environment

• react-native info output:

System:
  OS: macOS 15.1.1
  CPU: (8) x64 Apple M1
  Memory: 27.12 MB / 16.00 GB
  Shell:
    version: "5.9"
    path: /bin/zsh
Binaries:
  Node:
    version: 23.7.0
    path: ~/.nvm/versions/node/v23.7.0/bin/node
  Yarn:
    version: 1.22.22
    path: /opt/homebrew/bin/yarn
  npm:
    version: 8.11.0
    path: /usr/local/bin/npm
  Watchman: Not Found
Managers:
  CocoaPods:
    version: 1.16.2
    path: /opt/homebrew/bin/pod
SDKs:
  iOS SDK:
    Platforms:
      - DriverKit 24.2
      - iOS 18.2
      - macOS 15.2
      - tvOS 18.2
      - visionOS 2.2
      - watchOS 11.2
  Android SDK:
    Android NDK: 22.1.7171670
IDEs:
  Android Studio: 2024.2 AI-242.23339.11.2421.12700392
  Xcode:
    version: 16.2/16C5032a
    path: /usr/bin/xcodebuild
Languages:
  Java:
    version: 18.0.2
    path: /usr/bin/javac
  Ruby:
    version: 3.3.6
    path: /opt/homebrew/opt/ruby/bin/ruby
npmPackages:
  "@react-native-community/cli":
    installed: 15.0.1
    wanted: 15.0.1
  react:
    installed: 18.3.1
    wanted: 18.3.1
  react-native:
    installed: 0.76.6
    wanted: 0.76.6
  react-native-macos: Not Found
npmGlobalPackages:
  "*react-native*": Not Found
Android:
  hermesEnabled: true
  newArchEnabled: false
iOS:
  hermesEnabled: true
  newArchEnabled: true

[yedi97]

Does anyone have any solution to this problem?

[MarvinVrdoljak]

Having the same issue.

[BartoszKlonowski]

Dears, @yedi97, I couldn't reproduce the issue locally running this example on the new architecture.
However, I wasn't able to fully try the example provided by @yedi97 as I couldn't figure out the logic behind setTimelineChange and the way slide is updated. Still, implementing similar (but simplified) solution gave me fully smoothly working example.
There are two things I would like to emphasize:

• please remember to send minimal, reproducible example that we can use to help,
• often, such issues are caused by bugs / mistakes in how controlled value feature of Slider is used, so please make sure you have your solution debugged first.

I'm always happy to help and I'm available on our channel on Discord, for longer conversation or supporting with more complicated topics.

[mrswats]

I am having the same issue in android with expo 52.

    ...
    "@react-native-community/slider": "^4.5.7",
    ...
    "react-native": "0.76.9",

Here's my component:

import Slider from "@react-native-community/slider";
import { useState } from "react";
import { StyleSheet, View } from "react-native";
import { Text } from "./text";
import { LightTheme } from "./theme";

export default function DistanceFilter() {
    const [distance, setDistance] = useState<number>(1)

    return (
        <View>
            <View style={styles.header}>
                <View style={styles.titleWrapper}>
                    <Text style={styles.sectionTitle}>Distance</Text>
                </View>
                <View style={styles.distanceBubble}>
                    <Text style={styles.distanceBubbleText}>Up to {distance} km</Text>
                </View>
            </View>
            <View style={styles.sliderWrapper}>
                <Slider
                    value={distance}
                    onValueChange={setDistance}
                    step={1}
                    minimumValue={1}
                    maximumValue={8}
                    thumbTintColor={LightTheme.mainColor}
                    maximumTrackTintColor={LightTheme.mainColor}
                    renderStepNumber={true}
                />
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    header: {
        flexDirection: 'row',
    },
    sectionTitle: {
        fontSize: 20,
    },
    titleWrapper: {
        flex: 1,
        justifyContent: 'center'
    },
    distanceBubble: {
        backgroundColor: LightTheme.mainPale,
        borderColor: LightTheme.mainDark,
        borderWidth: 1,
        borderRadius: 25,
        paddingLeft: 10,
        paddingRight: 10,
        paddingTop: 2,
        paddingBottom: 2,
    },
    distanceBubbleText: {
        fontSize: 18
    },
    sliderWrapper: {
        marginTop: 20,
        marginBottom: 20
    }
});

I'd be happy to record a video, but I am having the same problem as the video.

[mrswats]

Playing around with this, using onSlidingComplete I do not experience this flickering and, for now, I will use this workaround to make it work even if it means that the value is not updated along with the slider.