Ask your Question
Is there any way to center the thumbImage above each step?
At the moment based on which side it is of the slider (right or left based on middle value) it is tilting on that side. See images below.
I cant seem to find any information on how to center the thumb based on the active step.
This is my code :
<Slider
minimumValue={minValue}
maximumValue={maxValue}
step={step}
tapToSeek
value={getValue()}
onValueChange={(e) => handleChange(e)}
onSlidingComplete={(e) => handleChange(e)}
minimumTrackTintColor={Colors.default.lime}
maximumTrackTintColor={Colors.default.lime}
style={{ zIndex: 1 }}
thumbImage={require('../../assets/images/sliderThumb.png')}
/>
<View
pointerEvents="none"
style={{ justifyContent: 'space-between', flexDirection: 'row', top: -25, zIndex: 2 }}
>
{options.map((i, index) => {
return (
<View style={{ alignItems: 'center' }}>
<SliderTrackMark key={index} isTrue={getValue() === i} />
<Paragraph style={{ marginTop: 20, textAlign: 'center' }}>{i}</Paragraph>
</View>
);
})}
</View>

Ask your Question
Is there any way to center the thumbImage above each step?
At the moment based on which side it is of the slider (right or left based on middle value) it is tilting on that side. See images below.
I cant seem to find any information on how to center the thumb based on the active step.
This is my code :