docs: add thumb slot example

muxinc · Nov 6, 2024 · d89c2cb · d89c2cb
1 parent ae8e3b1
commit d89c2cb
Showing 1 changed file with 19 additions and 0 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
@@ -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