From fbf64931d203fe05ff1558178d82b604a6dd5431 Mon Sep 17 00:00:00 2001
From: anapnoe <124302297+anapnoe@users.noreply.github.com>
Date: Fri, 5 May 2023 16:17:19 +0300
Subject: [PATCH] add touchstart and touchend support for slider drag on mobile

---
 javascript/ui.js | 29 +++++++++++++++++++++++------
 1 file changed, 23 insertions(+), 6 deletions(-)

diff --git a/javascript/ui.js b/javascript/ui.js
index a62c0d57..6e8d1e6d 100644
--- a/javascript/ui.js
+++ b/javascript/ui.js
@@ -1134,14 +1134,32 @@ onUiUpdate(function(){
 			clone_num.addEventListener('input', function (e) {								
 				clone_range.value = e.target.value;	
 			})
+			
 			const rect = clone_range.getBoundingClientRect();
 			const xoffset = (rect.left + window.scrollX);
+			const yoffset_min = (rect.top + window.scrollY);
+			const yoffset_max = (rect.bottom + window.scrollY);
+			let drag_clone_range = false;
 			clone_range.addEventListener('touchmove', function(e) {
 				e.preventDefault();				
-				let percent = parseInt(((e.touches[0].pageX - xoffset) / this.offsetWidth) * 10000) / 10000;				
-				clone_range.value = ( percent * (this.max - this.min)) + parseFloat(this.min);				
-				clone_num.value = clone_range.value;
-			});			
+				if(	drag_clone_range){			
+					let percent = parseInt(((e.touches[0].pageX - xoffset) / this.offsetWidth) * 10000) / 10000;				
+					clone_range.value = ( percent * (this.max - this.min)) + parseFloat(this.min);				
+					clone_num.value = clone_range.value;
+				}
+			}, {passive: true});
+			clone_range.addEventListener('touchstart', function(e) {
+				e.preventDefault();				
+				if(	e.touches[0].pageY > yoffset_min && e.touches[0].pageY < yoffset_max){			
+					drag_clone_range = true;
+				}
+			}, {passive: true});
+			clone_range.addEventListener('touchend', function(e) {
+				e.preventDefault();		
+				drag_clone_range = false;
+			}, {passive: true});
+
+					
 		}				
 	}
 	function ui_input_focus_handler(e){
@@ -1617,8 +1635,7 @@ function currentImg2imgSourceResolution(_, _, scaleBy){
 function updateImg2imgResizeToTextAfterChangingImage(){
     // At the time this is called from gradio, the image has no yet been replaced.
     // There may be a better solution, but this is simple and straightforward so I'm going with it.
-
-    setTimeout(function() {
+	setTimeout(function() {		
         gradioApp().getElementById('img2img_update_resize_to').click()
     }, 500);