diff --git a/src/video-grid/VideoTileSettingsModal.module.css b/src/video-grid/VideoTileSettingsModal.module.css
index eb6cec8..f1cdb50 100644
--- a/src/video-grid/VideoTileSettingsModal.module.css
+++ b/src/video-grid/VideoTileSettingsModal.module.css
@@ -23,6 +23,14 @@
   -webkit-appearance: none;
   appearance: none;
 
+  background-color: transparent;
+  --slider-color: var(--quinary-content);
+  --slider-height: 4px;
+  --thumb-color: var(--accent);
+  --thumb-radius: 100%;
+  --thumb-size: 16px;
+  --thumb-margin-top: -6px;
+
   cursor: pointer;
   width: 100%;
 }
@@ -31,51 +39,66 @@
   -moz-appearance: none;
   appearance: none;
 
-  height: 4px;
+  background-color: var(--slider-color);
+  height: var(--slider-height);
 }
 .localVolumeSlider[type="range"]::-ms-track {
   -ms-appearance: none;
   appearance: none;
 
-  height: 4px;
+  background-color: var(--slider-color);
+  height: var(--slider-height);
 }
 .localVolumeSlider[type="range"]::-webkit-slider-runnable-track {
   -webkit-appearance: none;
   appearance: none;
 
-  height: 4px;
+  background-color: var(--slider-color);
+  height: var(--slider-height);
 }
 
 .localVolumeSlider[type="range"]::-moz-range-thumb {
   -moz-appearance: none;
   appearance: none;
 
-  height: 16px;
-  width: 16px;
-  margin-top: -6px;
-
-  border-radius: 100%;
-  background: var(--accent);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-color);
 }
 .localVolumeSlider[type="range"]::-ms-thumb {
   -ms-appearance: none;
   appearance: none;
 
-  height: 16px;
-  width: 16px;
-  margin-top: -6px;
-
-  border-radius: 100%;
-  background: var(--accent);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-color);
 }
 .localVolumeSlider[type="range"]::-webkit-slider-thumb {
   -webkit-appearance: none;
   appearance: none;
 
-  height: 16px;
-  width: 16px;
-  margin-top: -6px;
-
-  border-radius: 100%;
-  background: var(--accent);
+  height: var(--thumb-size);
+  width: var(--thumb-size);
+  margin-top: var(--thumb-margin-top);
+  border-radius: var(--thumb-radius);
+  background: var(--thumb-color);
+}
+
+.localVolumeSlider[type="range"]::-moz-range-progress {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--slider-height);
+  background: var(--thumb-color);
+}
+.localVolumeSlider[type="range"]::-ms-fill-lower {
+  -moz-appearance: none;
+  appearance: none;
+
+  height: var(--slider-height);
+  background: var(--thumb-color);
 }