diff --git a/src/components/primitives/Slider/SliderThumb.tsx b/src/components/primitives/Slider/SliderThumb.tsx index 10ee3808f..4ee38d151 100644 --- a/src/components/primitives/Slider/SliderThumb.tsx +++ b/src/components/primitives/Slider/SliderThumb.tsx @@ -1,5 +1,5 @@ import React, { forwardRef } from 'react'; -import { Platform } from 'react-native'; +import { Platform, StyleSheet } from 'react-native'; import { useSliderThumb } from '@react-native-aria/slider'; import { VisuallyHidden } from '@react-aria/visually-hidden'; import { useToken } from '../../../hooks'; @@ -54,6 +54,7 @@ function SliderThumb(props: ISliderThumbProps, ref: any) { orientation === 'vertical' ? [{ translateY: parseInt(thumbAbsoluteSize) / 2 }] : [{ translateX: -parseInt(thumbAbsoluteSize) / 2 }], + position: orientation === 'vertical' ? 'absolute' : undefined, }; thumbStyles.transform.push({ @@ -64,22 +65,44 @@ function SliderThumb(props: ISliderThumbProps, ref: any) { return null; } + const styles = StyleSheet.create({ + wrapperHorizontal: { + width: '100%', + }, + wrapperVertical: { + alignItems: 'center', + height: '100%', + width: thumbSize, + }, + }); + return ( - {props.children} - {Platform.OS === 'web' && ( - - - - )} + + {props.children} + {Platform.OS === 'web' && ( + + + + )} + ); } diff --git a/src/components/primitives/Slider/SliderTrack.tsx b/src/components/primitives/Slider/SliderTrack.tsx index 28cfcbfc8..58f148360 100644 --- a/src/components/primitives/Slider/SliderTrack.tsx +++ b/src/components/primitives/Slider/SliderTrack.tsx @@ -44,6 +44,8 @@ const SliderTrack = ({ children, ...props }: ISliderTrackProps, ref?: any) => { return (