gluestack-ui

gluestack-ui copied to clipboard

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
• [X] React Native CLI
• [ ] Next
• [ ] Web
• [X] Android
• [X] iOS

Other Platform

No response

Additional Information

No response

Hey @Kreshnik, Thanks for reporting this issue. We will have a look.

Hey @Kreshnik, Can you provide entire code? I tried to work with this. it seems like adding h={'auto'} w={'auto'} to thumb must be causing some issue. for better reproduction of the issue can you please provide github repo or snack link?

@Viraj-10, unfortunately, I cannot share the repository; however, you can quickly reproduce the issue by creating a dynamic-sized thumbnail.