feat: add range CSS parts

fix #921, fix #983
muxinc · Sep 26, 2024 · f72fab4 · f72fab4
1 parent f99f8ed
commit f72fab4
Showing 1 changed file with 6 additions and 8 deletions.
diff --git a/src/js/media-chrome-range.ts b/src/js/media-chrome-range.ts
@@ -207,7 +207,6 @@ template.innerHTML = /*html*/ `
       height: var(--media-range-segment-hover-height, 7px);
     }
 
-    #background,
     #track {
       clip-path: url(#segments-clipping);
     }
@@ -240,13 +239,13 @@ template.innerHTML = /*html*/ `
     <div id="startpoint"></div>
     <div id="endpoint"></div>
     <div id="appearance" part="appearance">
-      <div id="background"></div>
-      <div id="track">
-        <div id="highlight"></div>
+      <div id="track" part="track">
+        <div id="background"></div>
+        <div id="highlight" part="highlight"></div>
         <div id="pointer"></div>
-        <div id="progress"></div>
+        <div id="progress" part="progress"></div>
       </div>
-      <div id="thumb"></div>
+      <div id="thumb" part="thumb"></div>
       <svg id="segments"><clipPath id="segments-clipping"></clipPath></svg>
     </div>
     <input id="range" type="range" min="0" max="1" step="any" value="0">
@@ -285,8 +284,7 @@ template.innerHTML = /*html*/ `
  * @cssproperty --media-range-thumb-transform - `transform` of range thumb.
  * @cssproperty --media-range-thumb-opacity - `opacity` of range thumb.
  *
- * @cssproperty [--media-range-bar-color = var(--media-primary-color, rgb(238 238 238))] - `color_value` of range bar (elapsed progress).
- * @cssproperty [--media-range-track-color = transparent] - `color_value` of range track (remaining progress).
+ * @cssproperty [--media-range-bar-color = var(--media-primary-color, rgb(238 238 238))] - `background` of range progress.
  * @cssproperty --media-range-track-backdrop-filter - `backdrop-filter` of range track.
  * @cssproperty --media-range-track-width - `width` of range track.
  * @cssproperty --media-range-track-height - `height` of range track.