From 4080981688f9208e6177416543bf7621fbedcece Mon Sep 17 00:00:00 2001
From: Janis Hutz <development@janishutz.com>
Date: Mon, 30 Sep 2024 16:22:28 +0200
Subject: [PATCH] some initial setup for logic of slider

---
 src/components/stopSlider.vue | 18 +++++++++++++++++-
 1 file changed, 17 insertions(+), 1 deletion(-)

diff --git a/src/components/stopSlider.vue b/src/components/stopSlider.vue
index 29eced1..ae72421 100644
--- a/src/components/stopSlider.vue
+++ b/src/components/stopSlider.vue
@@ -33,6 +33,18 @@
         }
     }
 
+    const startDrag = ( x: number ) => {
+
+    }
+
+    const handleDrag = ( x: number ) => {
+
+    }
+
+    const endDrag = () => {
+
+    }
+
     const props = defineProps( {
         'id': {
             default: '1',
@@ -41,6 +53,7 @@
         }
     } );
 
+
     defineExpose( {
         setUp
     } );
@@ -53,7 +66,10 @@
 
 <template>
     <div class="slider-container">
-        <div class="slider-knob" :style="'left: ' + sliderFillPosLeft + 'px;'"></div>
+        <div class="slider-knob" :style="'left: ' + sliderFillPosLeft + 'px;'"
+            @mousedown="( e ) => startDrag( e.clientX )" @mousemove="( e ) => handleDrag( e.clientX )"
+            @mouseup="( e ) => endDrag()"></div>
+
         <div class="slider-stop" v-for="stop in sliderStops" v-bind:key="stop.index" :style="'left: ' + stop.x + 'px;'"></div>
         <div class="slider" :id="'slider-' + $props.id">
             <div class="slider-fill" :style="'left: ' + sliderFillPosLeft + 'px; width: ' + ( maxWidth - sliderFillPosLeft - sliderFillPosRight ) + 'px'"></div>