diff --git a/src/components/messageStream/MessageInlineVideo.tsx b/src/components/messageStream/MessageInlineVideo.tsx
index becf2f7..a635a65 100644
--- a/src/components/messageStream/MessageInlineVideo.tsx
+++ b/src/components/messageStream/MessageInlineVideo.tsx
@@ -409,7 +409,9 @@ export function MessageInlineVideo({
             )}
           </button>
           {/* Always-visible inline straight-line volume slider (desktop only;
-              on touch devices users rely on the mute toggle + system volume). */}
+              on touch devices users rely on the mute toggle + system volume).
+              The left portion of the track is filled white via a hard-stop
+              gradient so the user can see the current level at a glance. */}
           <input
             type="range"
             min={0}
@@ -420,7 +422,14 @@ export function MessageInlineVideo({
             onClick={(e) => e.stopPropagation()}
             onPointerDown={(e) => e.stopPropagation()}
             aria-label="Volume"
-            className="hidden h-1 w-20 cursor-pointer appearance-none rounded-full bg-white/30 accent-white md:block"
+            style={{
+              backgroundImage: `linear-gradient(to right, #ffffff 0%, #ffffff ${
+                (isMuted ? 0 : volume) * 100
+              }%, rgba(255,255,255,0.3) ${
+                (isMuted ? 0 : volume) * 100
+              }%, rgba(255,255,255,0.3) 100%)`,
+            }}
+            className="hidden h-1 w-20 cursor-pointer appearance-none rounded-full accent-white md:block"
           />
         </div>