From ae8e3b1fd6b229807a8c8d9d52d24fd297e6989d Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Thu, 24 Oct 2024 14:44:12 -0500
Subject: [PATCH 1/4] feat: add thumb slot

---
 src/js/media-chrome-range.ts | 11 ++++++++---
 1 file changed, 8 insertions(+), 3 deletions(-)

diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index 768f7f343..6e052c305 100644
--- a/src/js/media-chrome-range.ts
+++ b/src/js/media-chrome-range.ts
@@ -172,7 +172,8 @@ template.innerHTML = /*html*/ `
       }
     }
 
-    #thumb {
+    #thumb,
+    ::slotted([slot=thumb]) {
       width: var(--media-range-thumb-width, 10px);
       height: var(--media-range-thumb-height, 10px);
       margin-left: calc(var(--media-range-thumb-width, 10px) / -2);
@@ -232,7 +233,9 @@ template.innerHTML = /*html*/ `
         <div id="pointer"></div>
         <div id="progress" part="progress"></div>
       </div>
-      <div id="thumb" part="thumb"></div>
+      <slot name="thumb">
+        <div id="thumb" part="thumb"></div>
+      </slot>
       <svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
     </div>
     <input id="range" type="range" min="0" max="1" step="any" value="0">
@@ -243,6 +246,8 @@ template.innerHTML = /*html*/ `
 /**
  * @extends {HTMLElement}
  *
+ * @slot thumb - The thumb element to use for the range.
+ *
  * @attr {boolean} disabled - The Boolean disabled attribute makes the element not mutable or focusable.
  * @attr {string} mediacontroller - The element `id` of the media controller to connect to (if not nested within).
  *
@@ -386,7 +391,7 @@ class MediaChromeRange extends globalThis.HTMLElement {
 
     this.#cssRules.pointer = getOrInsertCSSRule(this.shadowRoot, '#pointer');
     this.#cssRules.progress = getOrInsertCSSRule(this.shadowRoot, '#progress');
-    this.#cssRules.thumb = getOrInsertCSSRule(this.shadowRoot, '#thumb');
+    this.#cssRules.thumb = getOrInsertCSSRule(this.shadowRoot, '#thumb, ::slotted([slot="thumb"])');
     this.#cssRules.activeSegment = getOrInsertCSSRule(
       this.shadowRoot,
       '#segments-clipping rect:nth-child(0)'

From d89c2cb6bd19341082714112f416bd7ddb4a76e5 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Mon, 28 Oct 2024 10:27:41 -0500
Subject: [PATCH 2/4] docs: add thumb slot example

---
 .../docs/en/components/media-time-range.mdx   | 19 +++++++++++++++++++
 1 file changed, 19 insertions(+)

diff --git a/docs/src/pages/docs/en/components/media-time-range.mdx b/docs/src/pages/docs/en/components/media-time-range.mdx
index d6f6e00f9..cd81437fb 100644
--- a/docs/src/pages/docs/en/components/media-time-range.mdx
+++ b/docs/src/pages/docs/en/components/media-time-range.mdx
@@ -131,6 +131,25 @@ Set the `preview` slot to an empty element to remove the default preview element
 </media-controller>`}
 />
 
+## Thumb slot
+
+<SandpackContainer
+  editorHeight={330}
+  html={`<media-controller>
+  <video 
+    playsinline muted crossorigin
+    slot="media"
+    src="https://stream.mux.com/A3VXy02VoUinw01pwyomEO3bHnG4P32xzV7u1j1FSzjNg/low.mp4"
+  ></video>
+  <media-control-bar>
+    <media-time-range>
+      <svg slot="thumb" style="width: 20px; height: 20px; background: none;">
+        <circle fill="#df2c2c" cx="10" cy="10" r="10"/>
+      </svg>
+    </media-time-range>
+  </media-control-bar>
+</media-controller>`}
+/>
 
 
 ## Styling

From ebe4cd4d419358784bf075479973c74c77740f75 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Tue, 5 Nov 2024 10:48:49 -0600
Subject: [PATCH 3/4] fix: remove default styles for slotted thumb

---
 .../src/pages/docs/en/components/media-time-range.mdx |  4 ++--
 src/js/media-chrome-range.ts                          | 11 +++++++----
 2 files changed, 9 insertions(+), 6 deletions(-)

diff --git a/docs/src/pages/docs/en/components/media-time-range.mdx b/docs/src/pages/docs/en/components/media-time-range.mdx
index cd81437fb..83b7b5961 100644
--- a/docs/src/pages/docs/en/components/media-time-range.mdx
+++ b/docs/src/pages/docs/en/components/media-time-range.mdx
@@ -143,8 +143,8 @@ Set the `preview` slot to an empty element to remove the default preview element
   ></video>
   <media-control-bar>
     <media-time-range>
-      <svg slot="thumb" style="width: 20px; height: 20px; background: none;">
-        <circle fill="#df2c2c" cx="10" cy="10" r="10"/>
+      <svg slot="thumb">
+        <circle fill="#df2c2c" cx="5" cy="5" r="5"/>
       </svg>
     </media-time-range>
   </media-control-bar>
diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index 6e052c305..d64ef2c33 100644
--- a/src/js/media-chrome-range.ts
+++ b/src/js/media-chrome-range.ts
@@ -177,10 +177,6 @@ template.innerHTML = /*html*/ `
       width: var(--media-range-thumb-width, 10px);
       height: var(--media-range-thumb-height, 10px);
       margin-left: calc(var(--media-range-thumb-width, 10px) / -2);
-      border: var(--media-range-thumb-border, none);
-      border-radius: var(--media-range-thumb-border-radius, 10px);
-      background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
-      box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
       transition: var(--media-range-thumb-transition);
       transform: var(--media-range-thumb-transform, none);
       opacity: var(--media-range-thumb-opacity, 1);
@@ -189,6 +185,13 @@ template.innerHTML = /*html*/ `
       cursor: pointer;
     }
 
+    #thumb {
+      border-radius: var(--media-range-thumb-border-radius, 10px);
+      background: var(--media-range-thumb-background, var(--media-primary-color, rgb(238 238 238)));
+      box-shadow: var(--media-range-thumb-box-shadow, 1px 1px 1px transparent);
+      border: var(--media-range-thumb-border, none);
+    }
+
     :host([disabled]) #thumb {
       background-color: #777;
     }

From ed6e25c36356d1508319e97380460e23a42efa08 Mon Sep 17 00:00:00 2001
From: Wesley Luyten <me@wesleyluyten.com>
Date: Wed, 6 Nov 2024 15:51:36 -0600
Subject: [PATCH 4/4] fix: use translate to center thumb

---
 src/js/media-chrome-range.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
index d64ef2c33..868e8b681 100644
--- a/src/js/media-chrome-range.ts
+++ b/src/js/media-chrome-range.ts
@@ -176,10 +176,10 @@ template.innerHTML = /*html*/ `
     ::slotted([slot=thumb]) {
       width: var(--media-range-thumb-width, 10px);
       height: var(--media-range-thumb-height, 10px);
-      margin-left: calc(var(--media-range-thumb-width, 10px) / -2);
       transition: var(--media-range-thumb-transition);
       transform: var(--media-range-thumb-transform, none);
       opacity: var(--media-range-thumb-opacity, 1);
+      translate: -50%;
       position: absolute;
       left: 0;
       cursor: pointer;