The thumb doesn't follow when the progress value has actually changed

[tcf01]

Hi guys, I am using react-native-awesome-slider 2.4.0 version but I encounter some strange things. Here is my code & a reference video. What should I modify in the code? Thank u very much!

1. the thumb doesn't follow while the progress has actually changed
2. the bubble & the mark seems to have no effect

import {Box} from 'native-base'

const budget = 30 // it is a value from redux store
const progress = useSharedValue(budget);
const minAnimatedValue = useSharedValue(min);
const maxAnimatedValue = useSharedValue(max);

<>
                 <Slider
                        renderBubble={() => <Flex color={"green"}>{budget}</Flex>}
                        renderMark={() => <Text style={{ width: "100%", color: "green" }} >{budget}</Text>}
                        bubble={(s: number) => (Math.floor(Number(s))).toString()}
                        theme={{
                            disableMinTrackTintColor: '#fff',
                            maximumTrackTintColor: '#fff',
                            minimumTrackTintColor: '#999',
                            cacheTrackTintColor: '#333',
                            bubbleBackgroundColor: '#666',
                        }}
                        renderThumb={() => <Box backgroundColor={"white"} w={4} h={4} borderWidth={4} borderRadius={32} borderColor={"#999"} />}
                        minimumValue={minAnimatedValue}
                        maximumValue={maxAnimatedValue}
                        thumbScaleValue={thumbScaleValue}
                        onValueChange={(num) => setBudget(Math.floor(num))}
                        progress={/* { value: budget } */ progress}
                    />
</>

RPReplay_Final1687283982.MP4

[lamlengend98]

My issue is near this. When I swipe the thumb, it doesn't follow my gesture, like it's updated when swipe completing

[alantoa]

Hey, @tcf01, I cannot reproduce this example for my project. Can you create an example project on Expo Snack?

[waheedakhtar694]

Same here, progress getting increased but the slider position never gets changed.

[gimi-anders]

I had this same issue when using steps so it might be related to that. When I stopped using steps, it works fine.

[contactsimonwilson]

I'm also having the same issue. Will try to diagnose what the issue is.

[contactsimonwilson]

@jacobmolby
Adding the following reaction to set the thumbIndex correctly in slide.tsx when the value is changed from the host component fixes the issue

useAnimatedReaction(() => { if (snappingEnabled && !isScrubbing?.value) { const index = Math.round( ((progress.value - minimumValue.value) / (maximumValue.value - minimumValue.value)) * step ); return clamp(index, 0, step); } }, d => { if (typeof d === 'number') thumbIndex.value = d; }, [progress]);

[manuelxaguilar]

I had this same issue when using steps so it might be related to that. When I stopped using steps, it works fine.

Just had this issue and this solved it too

[gottfriedaniel]

I'm also facing the same issue when trying to manually update the thumb progress value.
Can also verify that removing the step prop does solve this bug.
Is there any estimation regarding this?

[diceros-soojungkim]

for me, the thumb follows, but when I try to save the value on the server and reset the thumb location, it just ends up at the beginning all over again. As for progress, it gets updated to the saved value.