feat(slider): Add touch events to slider

AmadeusITGroup · Jan 22, 2024 · 422cff6 · 422cff6
1 parent fa1bcb6
commit 422cff6
Show file tree

Hide file tree

Showing 4 changed files with 44 additions and 2 deletions.
diff --git a/angular/lib/src/components/slider/slider.component.ts b/angular/lib/src/components/slider/slider.component.ts
@@ -87,6 +87,7 @@ import {take} from 'rxjs';
 				[style.top.%]="state().handleDisplayOptions[item.id].top"
 				(keydown)="onKeyDown($event, item.id)"
 				(mousedown)="widget.actions.mouseDown($event, item.id)"
+				(touchstart)="widget.actions.touchStart($event, item.id)"
 			>
 				&nbsp;
 			</button>

diff --git a/core/src/components/slider/slider.ts b/core/src/components/slider/slider.ts
@@ -201,6 +201,13 @@ export interface SliderActions {
 	 * @param handleId - numeric id of the handle
 	 */
 	mouseDown(event: MouseEvent, handleId: number): void;
+
+	/**
+	 * Method describing the behavior of the slider handle on touch start event
+	 * @param event - touch event
+	 * @param handleId - number id of the handle
+	 */
+	touchStart(event: TouchEvent, handleId: number): void;
 }
 
 export type SliderWidget = Widget<SliderProps, SliderState, SliderApi, SliderActions, SliderDirectives>;
@@ -650,6 +657,38 @@ export function createSlider(config?: PropsConfig<SliderProps>): SliderWidget {
 					);
 				}
 			},
+			touchStart(event: TouchEvent, handleId: number) {
+				event.preventDefault();
+				const handleDrag = (e: TouchEvent) => {
+					e.preventDefault();
+					const newCoord = vertical$() ? e.touches[0].clientY : e.touches[0].clientX;
+					(event.target as HTMLElement).focus();
+					if (_prevCoordinate !== newCoord) {
+						_prevCoordinate = newCoord;
+						adjustCoordinate(newCoord, handleId);
+					}
+				};
+				if (isInteractable$()) {
+					(event.target as HTMLElement).focus();
+					document.addEventListener('touchmove', handleDrag);
+					document.addEventListener(
+						'touchend',
+						() => {
+							document.removeEventListener('touchmove', handleDrag);
+							document.removeEventListener('touchcancel', handleDrag);
+						},
+						{once: true},
+					);
+					document.addEventListener(
+						'touchcancel',
+						() => {
+							document.removeEventListener('touchmove', handleDrag);
+							document.removeEventListener('touchend', handleDrag);
+						},
+						{once: true},
+					);
+				}
+			},
 		},
 	};
 }
diff --git a/react/lib/src/components/slider/slider.tsx b/react/lib/src/components/slider/slider.tsx
@@ -30,7 +30,7 @@ export function Slider(props: Partial<SliderProps>) {
 			rtl,
 		},
 		{
-			actions: {click, keydown, mouseDown},
+			actions: {click, keydown, mouseDown, touchStart},
 			directives: {sliderDirective, minLabelDirective, maxLabelDirective},
 		},
 	] = useWidgetWithConfig(createSlider, props, 'slider');
@@ -127,6 +127,7 @@ export function Slider(props: Partial<SliderProps>) {
 						}}
 						onKeyDown={(e) => keydown(e as unknown as KeyboardEvent, item.id)}
 						onMouseDown={(e) => mouseDown(e as unknown as MouseEvent, item.id)}
+						onTouchStart={(e) => touchStart(e as unknown as TouchEvent, item.id)}
 					>
 						&nbsp;
 					</button>

diff --git a/svelte/lib/src/components/slider/Slider.svelte b/svelte/lib/src/components/slider/Slider.svelte
@@ -44,7 +44,7 @@
 			showMinMaxLabels$,
 			rtl$,
 		},
-		actions: {click, keydown, mouseDown},
+		actions: {click, keydown, mouseDown, touchStart},
 		directives: {sliderDirective, minLabelDirective, maxLabelDirective},
 		patchChangedProps,
 	} = widget;
@@ -115,6 +115,7 @@
 			style:top={`${$handleDisplayOptions$[item.id].top}%`}
 			on:keydown={(e) => keydown(e, item.id)}
 			on:mousedown={(e) => mouseDown(e, item.id)}
+			on:touchstart={(e) => touchStart(e, item.id)}
 		>
 			&nbsp;
 		</button>