diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index f9dcff5f6..0afafdf0a 100644
--- a/src/js/media-chrome-range.ts
+++ b/src/js/media-chrome-range.ts
@@ -121,6 +121,7 @@ template.innerHTML = /*html*/ `
 
     #appearance {
       height: var(--media-range-track-height, 4px);
+      transition: var(--media-range-track-transition);
       display: flex;
       flex-direction: column;
       justify-content: center;