diff --git a/packages/html/html/src/skins/media-skin-default.ts b/packages/html/html/src/skins/media-skin-default.ts
index 76cb964c..e58a32d5 100644
--- a/packages/html/html/src/skins/media-skin-default.ts
+++ b/packages/html/html/src/skins/media-skin-default.ts
@@ -80,69 +80,6 @@ export function getTemplateHTML() {
       .spacer {
         flex-grow: 1;
       }
-
-      /* Volume Range UI/Styles */
-      media-volume-range {
-        margin: 0 8px;
-      }
-
-      media-volume-range input[type="range"] {
-        width: 80px;
-        height: 4px;
-        background: rgb(50 50 50);
-        outline: none;
-        border-radius: 2px;
-      }
-
-      media-volume-range input[type="range"]::-webkit-slider-thumb {
-        appearance: none;
-        width: 12px;
-        height: 12px;
-        background: rgb(238 238 238);
-        border-radius: 50%;
-        cursor: pointer;
-      }
-
-      media-volume-range input[type="range"]::-moz-range-thumb {
-        width: 12px;
-        height: 12px;
-        background: rgb(238 238 238);
-        border-radius: 50%;
-        cursor: pointer;
-        border: none;
-      }
-
-      /* Time Range UI/Styles */
-      media-time-range {
-        flex-grow: 1;
-        margin: 0 8px;
-      }
-
-      media-time-range input[type="range"] {
-        width: 100%;
-        height: 4px;
-        background: rgb(50 50 50);
-        outline: none;
-        border-radius: 2px;
-      }
-
-      media-time-range input[type="range"]::-webkit-slider-thumb {
-        appearance: none;
-        width: 12px;
-        height: 12px;
-        background: rgb(238 238 238);
-        border-radius: 50%;
-        cursor: pointer;
-      }
-
-      media-time-range input[type="range"]::-moz-range-thumb {
-        width: 12px;
-        height: 12px;
-        background: rgb(238 238 238);
-        border-radius: 50%;
-        cursor: pointer;
-        border: none;
-      }
     </style>
     <media-container>
       <slot name="media" slot="media"></slot>
diff --git a/packages/react/react/src/skins/styles.module.css b/packages/react/react/src/skins/styles.module.css
index a88bd722..c2e2a270 100644
--- a/packages/react/react/src/skins/styles.module.css
+++ b/packages/react/react/src/skins/styles.module.css
@@ -48,10 +48,10 @@
 
 /* One way to define the "default visible" icon (CJP) */
 .MediaMuteButton:not([data-volume-level]) .VolumeLowIcon,
-.MediaMuteButton[data-volume-level=high] .VolumeHighIcon,
-.MediaMuteButton[data-volume-level=low] .VolumeLowIcon,
-.MediaMuteButton[data-volume-level=medium] .VolumeLowIcon,
-.MediaMuteButton[data-volume-level=off] .VolumeOffIcon {
+.MediaMuteButton[data-volume-level='high'] .VolumeHighIcon,
+.MediaMuteButton[data-volume-level='low'] .VolumeLowIcon,
+.MediaMuteButton[data-volume-level='medium'] .VolumeLowIcon,
+.MediaMuteButton[data-volume-level='off'] .VolumeOffIcon {
   display: inline-block;
 }
 
@@ -67,71 +67,6 @@
   flex-grow: 1;
 }
 
-/* Time Range UI/Styles */
-.TimeRange {
-  flex-grow: 1;
-  margin: 0 8px;
-}
-
-.TimeRange input[type="range"] {
-  width: 100%;
-  height: 4px;
-  background: rgb(50 50 50);
-  outline: none;
-  border-radius: 2px;
-  appearance: none;
-}
-
-.TimeRange input[type="range"]::-webkit-slider-thumb {
-  appearance: none;
-  width: 12px;
-  height: 12px;
-  background: rgb(238 238 238);
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.TimeRange input[type="range"]::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: rgb(238 238 238);
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-
-/* Volume Range UI/Styles */
-.VolumeRange {
-  margin: 0 8px;
-}
-
-.VolumeRange input[type="range"] {
-  width: 80px;
-  height: 4px;
-  background: rgb(50 50 50);
-  outline: none;
-  border-radius: 2px;
-  appearance: none;
-}
-
-.VolumeRange input[type="range"]::-webkit-slider-thumb {
-  appearance: none;
-  width: 12px;
-  height: 12px;
-  background: rgb(238 238 238);
-  border-radius: 50%;
-  cursor: pointer;
-}
-
-.VolumeRange input[type="range"]::-moz-range-thumb {
-  width: 12px;
-  height: 12px;
-  background: rgb(238 238 238);
-  border-radius: 50%;
-  cursor: pointer;
-  border: none;
-}
-
 /* Base Button Styling */
 .MediaPlayButton {
   border: none;
@@ -141,7 +76,8 @@
   color: rgb(238 238 238);
 
   /* Basic Icon Styling for Buttons */
-  .PlayIcon, .PauseIcon {
+  .PlayIcon,
+  .PauseIcon {
     width: 24px;
     height: 24px;
     display: none; /* Hide icons by default */
@@ -152,4 +88,4 @@
   &[data-paused] .PlayIcon {
     display: inline-block;
   }
-}
\ No newline at end of file
+}