RangeControl: animate thumb and track only when using marks (WordPres…

…s#67836) Co-authored-by: ciampo <[email protected]> Co-authored-by: jameskoster <[email protected]> Co-authored-by: youknowriad <[email protected]> Co-authored-by: mirka <[email protected]> Co-authored-by: tyxla <[email protected]>
yogeshbhutkar · Dec 18, 2024 · 8813ef5 · 8813ef5
1 parent 809c7c9
commit 8813ef5
Showing 1 changed file with 8 additions and 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
@@ -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 };