diff --git a/.eslintrc.js b/.eslintrc.js
index 4385f528f44dbb..01f6967e8fe947 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -293,6 +293,7 @@ module.exports = {
 						'CheckboxControl',
 						'ComboboxControl',
 						'FocalPointPicker',
+						'RangeControl',
 						'SearchControl',
 						'TextareaControl',
 						'TreeSelect',
diff --git a/packages/block-editor/src/layouts/grid.js b/packages/block-editor/src/layouts/grid.js
index 975b79f4ba570e..395d0ca1e9d833 100644
--- a/packages/block-editor/src/layouts/grid.js
+++ b/packages/block-editor/src/layouts/grid.js
@@ -264,6 +264,7 @@ function GridLayoutMinimumWidthControl( { layout, onChange } ) {
 				</FlexItem>
 				<FlexItem isBlock>
 					<RangeControl
+						__nextHasNoMarginBottom
 						onChange={ handleSliderChange }
 						value={ quantity || 0 }
 						min={ 0 }
@@ -367,6 +368,7 @@ function GridLayoutColumnsAndRowsControl( {
 							/>
 						) : (
 							<RangeControl
+								__nextHasNoMarginBottom
 								value={ columnCount ?? 0 }
 								onChange={ ( value ) =>
 									onChange( {
diff --git a/packages/block-library/src/post-excerpt/edit.js b/packages/block-library/src/post-excerpt/edit.js
index 702219e06a9694..45d0a79a411d61 100644
--- a/packages/block-library/src/post-excerpt/edit.js
+++ b/packages/block-library/src/post-excerpt/edit.js
@@ -231,6 +231,7 @@ export default function PostExcerptEditor( {
 						}
 					/>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Max number of words' ) }
 						value={ excerptLength }
 						onChange={ ( value ) => {
diff --git a/packages/block-library/src/query-pagination-numbers/edit.js b/packages/block-library/src/query-pagination-numbers/edit.js
index eb83204b2cca2b..e495fe8529a07a 100644
--- a/packages/block-library/src/query-pagination-numbers/edit.js
+++ b/packages/block-library/src/query-pagination-numbers/edit.js
@@ -51,6 +51,7 @@ export default function QueryPaginationNumbersEdit( {
 			<InspectorControls>
 				<PanelBody title={ __( 'Settings' ) }>
 					<RangeControl
+						__nextHasNoMarginBottom
 						label={ __( 'Number of links' ) }
 						help={ __(
 							'Specify how many links can appear before and after the current page number. Links to the first, current and last page are always visible.'
diff --git a/packages/components/src/range-control/README.md b/packages/components/src/range-control/README.md
index 1a0f1e6adef95a..3da335b9ecf6e8 100644
--- a/packages/components/src/range-control/README.md
+++ b/packages/components/src/range-control/README.md
@@ -90,6 +90,7 @@ const MyRangeControl = () => {
 
 	return(
 		<RangeControl
+			__nextHasNoMarginBottom
 			label="Columns"
 			value={ columns }
 			onChange={ ( value ) => setColumns( value ) }
@@ -361,6 +362,13 @@ Determines if the `input` number field will render next to the RangeControl. Thi
 -   Required: No
 -   Platform: Web
 
+### `__nextHasNoMarginBottom`: `boolean`
+
+Start opting into the new margin-free styles that will become the default in a future version.
+
+-   Required: No
+-   Default: `false`
+
 ## Related components
 
 -   To collect a numerical input in a text field, use the `TextControl` component.
diff --git a/packages/components/src/range-control/index.tsx b/packages/components/src/range-control/index.tsx
index d12c1ca913612e..a5d8a7c659a182 100644
--- a/packages/components/src/range-control/index.tsx
+++ b/packages/components/src/range-control/index.tsx
@@ -360,6 +360,7 @@ function UnforwardedRangeControl(
  *   const [ isChecked, setChecked ] = useState( true );
  *   return (
  *     <RangeControl
+ *       __nextHasNoMarginBottom
  *       help="Please select how transparent you would like this."
  *       initialPosition={50}
  *       label="Opacity"