change gui

src/lib/UI/GUI/SliderInput.svelte

@@ -1,4 +1,4 @@
-<input
+<!-- <input
     class="text-textcolor bg-transparent input-text"
     class:mb-4={marginBottom}
     type="range"
@@ -7,25 +7,43 @@
     step={step}
     bind:value
     on:change
->
+> -->
 
-<!-- <div class="p-6 max-w-sm mx-auto bg-gray-800 rounded-xl shadow-md flex items-center space-x-4 w-full" class:mb-4={marginBottom}>
+<div class="w-full" class:mb-4={marginBottom}>
+  <div 
+    class="relative w-full h-8 border-darkborderc border rounded-full cursor-pointer"
+    on:mousedown={(event) => {
+      mouseDown = true;
+      changeValue(event);
+    }}
+
+    on:mousemove={(event) => {
+      if (mouseDown) {
+        changeValue(event);
+      }
+    }}
+
+    on:mouseup={() => {
+      mouseDown = false;
+    }}  
+
+    on:mouseleave={() => {
+      mouseDown = false;
+    }}
+    bind:this={slider}
+  >
     <div 
-      class="relative w-full h-2 bg-darkbutton rounded-full cursor-pointer"
-      on:click={changeValue}
+      class="absolute top-0 left-0 h-8 rounded-full bg-borderc transition-width duration-200"
+      style="width: {(value - min) / (max - min) * 100}%;"
     >
-      <div 
-        class="absolute top-0 left-0 h-2 rounded-full bg-indigo-500 transition-width duration-200"
-        style="width: {(value - min) / (max - min) * 100}%;"
-      >
-      </div>
-      <div 
-        class="absolute top-1/2 transform -translate-y-1/2 -translate-x-1/2 w-4 h-4 bg-white rounded-full shadow"
-        style="left: {(value - min) / (max - min) * 100}%;"
-      >
-      </div>
     </div>
-</div> -->
+    <span 
+      class="absolute top-0 left-4 h-8 w-8 rounded-full items-center justify-center flex text-textcolor text-sm"
+    >
+      {(value * multiple).toFixed(fixed)}
+    </span>
+  </div>
+</div>
 
 
 <script lang="ts">
@@ -34,10 +52,15 @@
     export let value:number
     export let marginBottom = false
     export let step = 1
+    export let fixed = 0
+    export let multiple = 1
+    let slider: HTMLDivElement
+    let mouseDown = false
 
     function changeValue(event) {
-        const rect = event.target.getBoundingClientRect();
+        const rect = slider.getBoundingClientRect();
         const x = event.clientX - rect.left;
+        console.log(x, rect.width);
         let newValue = ((x / rect.width) * (max - min)) + min;
         newValue = Math.round(newValue / step) * step;
         value = Math.min(Math.max(newValue, min), max);