diff --git a/components/PlaybackControls.tsx b/components/PlaybackControls.tsx
index 974c19f..4e75d6d 100644
--- a/components/PlaybackControls.tsx
+++ b/components/PlaybackControls.tsx
@@ -70,7 +70,21 @@ const PlaybackControls: React.FC<PlaybackControlsProps> = ({
           step={0.01}
           value={volume}
           onChange={(e) => setVolume(parseFloat(e.target.value))}
-          className="w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)]"
+          onTouchStart={(e) => {
+            // Prevent default touch behavior
+            e.stopPropagation()
+          }}
+          onTouchMove={(e) => {
+            // Get the touch position relative to the input
+            const touch = e.touches[0]
+            const input = e.target as HTMLInputElement
+            const rect = input.getBoundingClientRect()
+            const pos = (touch.clientX - rect.left) / rect.width
+            // Clamp the value between 0 and 1
+            const newVolume = Math.max(0, Math.min(1, pos))
+            setVolume(newVolume)
+          }}
+          className="w-full cursor-pointer accent-[var(--lofi-accent)] rounded-lg bg-[var(--lofi-card-hover)] touch-none"
         />
       </div>
     </div>