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 (