From 8813ef50f6e1ecf739dd89aeb5d1d1e7dc99af4f Mon Sep 17 00:00:00 2001
From: Marco Ciampini <marco.ciampo@gmail.com>
Date: Thu, 12 Dec 2024 18:47:35 +0100
Subject: [PATCH] RangeControl: animate thumb and track only when using marks
 (#67836)

Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: jameskoster <jameskoster@git.wordpress.org>
Co-authored-by: youknowriad <youknowriad@git.wordpress.org>
Co-authored-by: mirka <0mirka00@git.wordpress.org>
Co-authored-by: tyxla <tyxla@git.wordpress.org>
---
 .../src/range-control/styles/range-control-styles.ts | 12 ++++++++----
 1 file changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/components/src/range-control/styles/range-control-styles.ts b/packages/components/src/range-control/styles/range-control-styles.ts
index d943ca472911ed..c86c57800cac46 100644
--- a/packages/components/src/range-control/styles/range-control-styles.ts
+++ b/packages/components/src/range-control/styles/range-control-styles.ts
@@ -130,8 +130,10 @@ export const Track = styled.span`
 	margin-top: ${ ( rangeHeightValue - railHeight ) / 2 }px;
 	top: 0;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: width ease 0.1s;
+	.is-marked & {
+		@media not ( prefers-reduced-motion ) {
+			transition: width ease 0.1s;
+		}
 	}
 
 	${ trackBackgroundColor };
@@ -203,8 +205,10 @@ export const ThumbWrapper = styled.span`
 	border-radius: ${ CONFIG.radiusRound };
 	z-index: 3;
 
-	@media not ( prefers-reduced-motion ) {
-		transition: left ease 0.1s;
+	.is-marked & {
+		@media not ( prefers-reduced-motion ) {
+			transition: left ease 0.1s;
+		}
 	}
 
 	${ thumbColor };