When the slider thumb has a custom style, it no longer syncs with the SliderTrack #1944
Description
Description
When the slider thumb has a custom style, it no longer syncs with the SliderTrack.
CodeSandbox/Snack link
No response
Steps to reproduce
I've encountered an issue where custom styling applied to the slider thumb results in a loss of synchronization with the SliderTrack component. This issue becomes evident when the slider thumb is moved along the track; the thumb does not align properly with the corresponding values or positions on the SliderTrack.
<Slider
defaultValue={props.value}
maxValue={30}
step={1}
orientation="horizontal"
isDisabled={false}
isReversed={false}
onChange={handleMinutesChange}
onChangeEnd={handleMinutesChangeEnd}
>
<SliderTrack h={24} borderRadius={16} bg={'#1C283E12'}>
<SliderFilledTrack bg={'#1C283E80'} borderRadius={16} />
</SliderTrack>
<SliderThumb
bg="#333E51"
borderColor="#BBBFC5"
borderWidth={4}
h={'auto'}
w={'auto'}
zIndex={1}
px={16}
py={4}
>
<Text
textAlign={'center'}
fontSize={'$sm'}
lineHeight={'$sm'}
color={'white'}
fontWeight={'$interRegular'}
>
{minutes} min
</Text>
</SliderThumb>
</Slider>
gluestack-ui Version
"@gluestack-style/react": "^1.0.51", "@gluestack-ui/themed": "^1.1.11",
Platform
- Expo
- React Native CLI
- Next
- Web
- Android
- iOS
Other Platform
No response
Additional Information
No response