update slider styling

- hover, drag color

src/components/player/PlayerBar.tsx

@@ -87,7 +87,7 @@ const PlayerBar = () => {
         }
         settings.setSync('volume', localVolume);
       }
-      setIsDragging(false);
+      setIsDraggingVolume(false);
     }, 10);
 
     return () => clearTimeout(debounce);
@@ -567,6 +567,7 @@ const PlayerBar = () => {
                     progress
                     defaultValue={0}
                     value={isDragging ? manualSeek : seek}
+                    $isDragging={isDragging}
                     tooltip={false}
                     max={
                       playQueue[currentEntryList][playQueue.currentIndex]
@@ -721,6 +722,7 @@ const PlayerBar = () => {
                     tabIndex={0}
                     progress
                     value={Math.floor(localVolume * 100)}
+                    $isDragging={isDraggingVolume}
                     tooltip={false}
                     style={{ width: '100px', marginRight: '10px' }}
                     onChange={handleVolumeSlider}

src/components/player/styled.tsx

@@ -70,16 +70,24 @@ export const LinkButton = styled.a<{ subtitle?: string }>`
   }
 `;
 
-export const CustomSlider = styled(Slider)`
+export const CustomSlider = styled(Slider)<{ isDragging?: boolean }>`
-  .rs-slider-progress-bar {
+  &:hover {
-    background-color: ${(props) => props.theme.primary.sliderBackground};
+    .rs-slider-handle::before {
+      display: block;
+    }
+    .rs-slider-progress-bar {
+      background-color: ${(props) => props.theme.primary.main};
+    }
   }
-
+  .rs-slider-progress-bar {
-  .rs-slider-progress-bar::hover {
+    background-color: ${(props) =>
-    background-color: #ff0 !important;
+      props.$isDragging
+        ? props.theme.primary.main
+        : props.theme.primary.sliderBackground};
   }
 
   .rs-slider-handle::before {
+    display: none;
     border: ${(props) => `1px solid ${props.theme.primary.main} !important`};
   }
 `;