Merge pull request #2518 from u7486259/master

fix: sfx slider more responsive on mobile, closes #2183

src/ui/interface.js

@@ -375,6 +375,32 @@ export class UI {
 		const slider = document.getElementById('sfx');
 		slider.addEventListener('input', () => (game.soundsys.allEffectsMultiplier = slider.value));
 
+		// Prevents default touch behaviour on slider when first touched (prevents scrolling the screen).
+		slider.addEventListener('touchstart', (e) => e.preventDefault(), { passive: false });
+
+		slider.addEventListener('touchmove', (e) =>{
+			// Get slider relative to the view port.
+			const sliderRect = slider.getBoundingClientRect();
+			// The original touch point Y coordinate relative to the view port.
+			const touchPoint = e.touches[0].clientY;
+			/// The y coord of the touch event relative to the slider.
+			const touchRelToSlider = touchPoint - sliderRect.top;
+			const distFromBottom = sliderRect.height - touchRelToSlider;
+			// Normalize the distance from the bottom of the slider to a value between 0 and 1.
+			const normDist = distFromBottom / sliderRect.height;
+			// Scale normDist to range of the slider.
+			const scaledDist = normDist * (slider.max - slider.min);
+			// New value of the slider.
+			const slidersNewVal = scaledDist + parseFloat(slider.min);
+			// Sets the slider value to the new value between the min/max bounds of the slider.
+			slider.value = Math.min(Math.max(slidersNewVal, slider.min), slider.max);
+
+			// Manually dispatches the input event to update the sound system with new slider value.
+			slider.dispatchEvent(new Event('input'));
+		});
+
+
+
 		this.hotkeys = new Hotkeys(this);
 		const ingameHotkeys = getHotKeys(this.hotkeys);