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] 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