Is there an existing issue for this?
Explain what you did
When migrating from rneui, I noticed the Slider seems to behave slightly different. The minimumTrack seems to float above the rest of the track, and not in line with it. When removing my custom styling, it doesn't seem to go away.
Expected behavior
The minimumTrack should be in-line with the maximumTrack
Describe the bug
The minimumTrack floats about the maximumTrack
Steps To Reproduce
Minimum example:
import React, { useState } from 'react';
import { View } from 'react-native';
import { Slider } from '@rn-vui/themed';
import { Icon } from '@rn-vui/themed';
export default function MinimalSlider() {
const [value, setValue] = useState(1);
return (
<View style={{ width: 300, padding: 20 }}>
<Slider
style={{ marginHorizontal: 15, marginTop: 10 }}
value={value}
onSlidingComplete={setValue}
minimumValue={1}
maximumValue={5}
step={1}
maximumTrackTintColor="#e0e0e0"
minimumTrackTintColor="#1976d2"
allowTouchTrack
trackStyle={{
height: 15,
backgroundColor: 'transparent',
borderRadius: 8,
}}
thumbStyle={{
height: 30,
width: 30,
backgroundColor: 'transparent',
}}
thumbProps={{
children: (
<Icon
name="circle"
type="material"
size={30}
containerStyle={{ bottom: 0, right: 0 }}
color="#1976d2"
/>
),
}}
/>
</View>
);
}Screenshots
Your Environment
`npx @rneui/envinfo`
React Native Elements Env Info
Global Dependencies:
No related dependency found
Local Dependencies:
- expo : ~52.0.47
- react : 18.3.1
- react-native : 0.77.3
Is there an existing issue for this?
Explain what you did
When migrating from rneui, I noticed the Slider seems to behave slightly different. The minimumTrack seems to float above the rest of the track, and not in line with it. When removing my custom styling, it doesn't seem to go away.
Expected behavior
The minimumTrack should be in-line with the maximumTrack
Describe the bug
The minimumTrack floats about the maximumTrack
Steps To Reproduce
Minimum example: import React, { useState } from 'react'; import { View } from 'react-native'; import { Slider } from '@rn-vui/themed'; import { Icon } from '@rn-vui/themed'; export default function MinimalSlider() { const [value, setValue] = useState(1); return ( <View style={{ width: 300, padding: 20 }}> <Slider style={{ marginHorizontal: 15, marginTop: 10 }} value={value} onSlidingComplete={setValue} minimumValue={1} maximumValue={5} step={1} maximumTrackTintColor="#e0e0e0" minimumTrackTintColor="#1976d2" allowTouchTrack trackStyle={{ height: 15, backgroundColor: 'transparent', borderRadius: 8, }} thumbStyle={{ height: 30, width: 30, backgroundColor: 'transparent', }} thumbProps={{ children: ( <Icon name="circle" type="material" size={30} containerStyle={{ bottom: 0, right: 0 }} color="#1976d2" /> ), }} /> </View> ); }Screenshots
Your Environment
`npx @rneui/envinfo`
Global Dependencies:
No related dependency found
Local Dependencies: