Merge pull request #178 from hyvor/slider-mobile

fixes #171 Slider mobile

src/lib/components/Slider/Slider.svelte

@@ -36,24 +36,57 @@
 	function handleMouseup() {
 		dragging = false;
 		window.removeEventListener('mousemove', handleMousemove);
+		window.removeEventListener('mouseup', handleMouseup);
 	}
 
 	function handleMousemove(event: MouseEvent) {
 		if (!trackEl) return;
 		if (dragging) {
-			const rect = trackEl.getBoundingClientRect();
-			const x = event.clientX - rect.left;
-			const width = rect.width;
-			const newValue = min + (x / width) * (max - min);
-			value = toStep(newValue);
-			dispatch('change', value);
+			calcPosUpdateValue(trackEl, event.clientX);
 		}
 	}
+
+	// touch events
+	function handleTouchstart(event: TouchEvent) {
+		dragging = true;
+		handleTouchmove(event);
+
+		window.addEventListener('touchmove', handleTouchmove);
+		window.addEventListener('touchend', handleTouchend);
+	}
+
+	function handleTouchend() {
+		dragging = false;
+		window.removeEventListener('touchmove', handleTouchmove);
+		window.removeEventListener('touchend', handleTouchend);
+	}
+
+	function handleTouchmove(event: TouchEvent) {
+		if (!trackEl) return;
+		if (dragging) {
+			calcPosUpdateValue(trackEl, event.touches[0].clientX);
+		}
+	}
+
+	function calcPosUpdateValue(trackEl: HTMLDivElement, clientX: number) {
+		const rect = trackEl.getBoundingClientRect();
+		const x = clientX - rect.left;
+		const width = rect.width;
+		const newValue = min + (x / width) * (max - min);
+		value = toStep(newValue);
+		dispatch('change', value);
+	}
 </script>
 
 <div class="slider">
 	<!-- svelte-ignore a11y_no_static_element_interactions -->
-	<div class="track" bind:this={trackEl} class:dragging onmousedown={handleMousedown}>
+	<div
+		class="track"
+		bind:this={trackEl}
+		class:dragging
+		onmousedown={handleMousedown}
+		ontouchstart={handleTouchstart}
+	>
 		<div class="progress" style="width: {progress}%"></div>
 		<button class="handle" style="left: {progress}%">
 			<span class="tip">