diff --git a/blocks/inspector-controls/range-control/index.js b/blocks/inspector-controls/range-control/index.js
new file mode 100644
index 00000000000000..a596513fdd9ca0
--- /dev/null
+++ b/blocks/inspector-controls/range-control/index.js
@@ -0,0 +1,23 @@
+/**
+ * WordPress dependencies
+ */
+import { withInstanceId } from 'components';
+
+/**
+ * Internal dependencies
+ */
+import './style.scss';
+
+function RangeControl( { label, value, instanceId, onChange, ...props } ) {
+	const id = 'inspector-range-control-' + instanceId;
+
+	return (
+		<div className="blocks-range-control">
+			<label className="blocks-range-control__label" htmlFor={ id }>{ label }</label>
+			<input className="blocks-range-control__input" id={ id } type="range" value={ value } onChange={ onChange } { ...props } />
+			<span>{ value }</span>
+		</div>
+	);
+}
+
+export default withInstanceId( RangeControl );
diff --git a/blocks/inspector-controls/range-control/style.scss b/blocks/inspector-controls/range-control/style.scss
new file mode 100644
index 00000000000000..81b946ecd9393c
--- /dev/null
+++ b/blocks/inspector-controls/range-control/style.scss
@@ -0,0 +1,9 @@
+.blocks-range-control {
+	margin-bottom: 10px;
+}
+
+.blocks-range-control__label {
+	display: block;
+	font-weight: 500;
+	margin-bottom: 5px;
+}
diff --git a/blocks/inspector-controls/text-control/index.js b/blocks/inspector-controls/text-control/index.js
index a4a2cc80ce3997..4294e20c321f8f 100644
--- a/blocks/inspector-controls/text-control/index.js
+++ b/blocks/inspector-controls/text-control/index.js
@@ -8,14 +8,14 @@ import { withInstanceId } from 'components';
  */
 import './style.scss';
 
-function TextControl( { label, value, instanceId, onChange } ) {
+function TextControl( { label, value, instanceId, onChange, type = 'text', ...props } ) {
 	const id = 'inspector-text-control-' + instanceId;
 	const onChangeValue = ( event ) => onChange( event.target.value );
 
 	return (
 		<div className="blocks-text-control">
 			<label className="blocks-text-control__label" htmlFor={ id }>{ label }</label>
-			<input className="blocks-text-control__input" id={ id } value={ value } onChange={ onChangeValue } />
+			<input className="blocks-text-control__input" type={ type } id={ id } value={ value } onChange={ onChangeValue } { ...props } />
 		</div>
 	);
 }
diff --git a/blocks/inspector-controls/text-control/style.scss b/blocks/inspector-controls/text-control/style.scss
index f211160c5558b7..be49efd08ff5cd 100644
--- a/blocks/inspector-controls/text-control/style.scss
+++ b/blocks/inspector-controls/text-control/style.scss
@@ -12,3 +12,4 @@
 	width: 100%;
 	padding: 6px 10px;
 }
+
diff --git a/blocks/library/gallery/index.js b/blocks/library/gallery/index.js
index aabfe75b178bb3..3de6361aafd436 100644
--- a/blocks/library/gallery/index.js
+++ b/blocks/library/gallery/index.js
@@ -13,6 +13,7 @@ import { Toolbar, Placeholder } from 'components';
 
 import MediaUploadButton from '../../media-upload-button';
 import InspectorControls from '../../inspector-controls';
+import RangeControl from '../../inspector-controls/range-control';
 
 import GalleryImage from './gallery-image';
 
@@ -118,10 +119,9 @@ registerBlockType( 'core/gallery', {
 		}
 	},
 
-	edit( { attributes, setAttributes, focus, id } ) {
+	edit( { attributes, setAttributes, focus } ) {
 		const { images = [], columns = defaultColumnsNumber( attributes ), align = 'none' } = attributes;
 		const setColumnsNumber = ( event ) => setAttributes( { columns: event.target.value } );
-		const rangeId = `blocks-gallery-range-${ id }`;
 		if ( images.length === 0 ) {
 			const setMediaUrl = ( imgs ) => setAttributes( { images: imgs } );
 			return (
@@ -156,9 +156,7 @@ registerBlockType( 'core/gallery', {
 				) ) }
 				{ focus && images.length > 1 &&
 					<InspectorControls>
-						<label className="blocks-text-control__label" htmlFor={ rangeId }>{ __( 'Columns' ) }</label>
-						<input id={ rangeId } type="range" min="1" max={ Math.min( MAX_COLUMNS, images.length ) } value={ columns } onChange={ setColumnsNumber } />
-						<span>{columns}</span>
+						<RangeControl label={ __( 'Columns' ) } value={ columns } onChange={ setColumnsNumber } min="1" max={ Math.min( MAX_COLUMNS, images.length ) } />
 					</InspectorControls> }
 			</div>
 		);