I’m currently working on an audio application where I have multiple volume sliders for different audio tracks. The sliders function well on desktop, but I’m experiencing issues on mobile devices.
Here are the specifics:
Desktop Behavior: The volume sliders work correctly, allowing users to adjust the volume.
Mobile Behavior: The sliders do not respond to touch input, and the slider handles remain stuck at the top position. Interestingly, I can prevent scrolling on mobile, but the sliders themselves remain unresponsive.
Code Context: I have attached my HTML and JavaScript code for reference. I’m particularly concerned about ensuring that the sliders are interactive on both desktop and mobile.
Code : https://www.dropbox.com/scl/fi/qgqijyxezf8drfglt2o4u/Code-for-music-site.paper?rlkey=n9kw1dx9f0q5pw5ezhlte98bb&st=pyncrgqq&dl=0
Interface test : https://seblioteca.com/mixioteca-3
I’ve tried different approaches but haven’t found a solution yet. Any help or suggestions would be greatly appreciated!
Thank you!
What I tried:
I implemented volume sliders using <input type="range"> in my HTML.
I added event listeners to the sliders for input changes to update the audio volume.
I also tried preventing scrolling on mobile devices by using e.preventDefault() on touch events.
I tested the sliders on both desktop and mobile devices.
What I expected:
I expected that the sliders would allow users to adjust the volume interactively on both desktop and mobile. Specifically, I hoped that on mobile, the sliders would be responsive to touch input, allowing users to slide the volume up or down smoothly. However, on mobile, the sliders are unresponsive, even though I can prevent scrolling.