diff --git a/packages/components/src/range-control/index.js b/packages/components/src/range-control/index.js
index 27e0a94745070b..0ce9f4e5fa4d76 100644
--- a/packages/components/src/range-control/index.js
+++ b/packages/components/src/range-control/index.js
@@ -101,7 +101,6 @@ function RangeControl(
 	const calculatedFillValue = ( ( value - min ) / ( max - min ) ) * 100;
 	const fillValue = isValueReset ? 50 : calculatedFillValue;
 	const fillValueOffset = `${ clamp( fillValue, 0, 100 ) }%`;
-	const tooltipOffset = `calc( ${ fillValueOffset } - 4px )`;
 
 	const classes = classnames( 'components-range-control', className );
 
@@ -190,9 +189,6 @@ function RangeControl(
 	const offsetStyle = {
 		[ isRTL() ? 'right' : 'left' ]: fillValueOffset,
 	};
-	const tooltipOffsetStyle = {
-		[ isRTL() ? 'right' : 'left' ]: tooltipOffset,
-	};
 
 	return (
 		<BaseControl
@@ -262,7 +258,7 @@ function RangeControl(
 							inputRef={ inputRef }
 							renderTooltipContent={ renderTooltipContent }
 							show={ isCurrentlyFocused || showTooltip }
-							style={ tooltipOffsetStyle }
+							style={ offsetStyle }
 							value={ value }
 						/>
 					) }
diff --git a/packages/components/src/range-control/styles/range-control-styles.js b/packages/components/src/range-control/styles/range-control-styles.js
index 0cbda7e4249690..658d369fcdb95d 100644
--- a/packages/components/src/range-control/styles/range-control-styles.js
+++ b/packages/components/src/range-control/styles/range-control-styles.js
@@ -186,6 +186,7 @@ export const ThumbWrapper = styled.span`
 	user-select: none;
 	width: ${ thumbSize }px;
 	border-radius: 50%;
+	transform: translateX( 4.5px );
 
 	${ thumbColor };
 	${ rtl( { marginLeft: -10 } ) };