feat(slider): update slider for Svelte 5 compatibility

src/svelte-interface/components/Slider.svelte

@@ -1,15 +1,16 @@
 <script lang="ts">
-  export let state: number;
-  export let onChange: (value: number) => void;
+  let { state, onChange } = $props<{ state: number, onChange: (value: number) => void }>();
+  let percentage = $derived((state / 100) * 100);
 </script>
 
-<div class="relative w-full max-w-lg py-8 mx-auto">
+<div class="relative w-full max-w-lg mx-auto">
   <input
     type="range"
     min="0"
     max="100"
     bind:value={state}
-    on:change={(e) => onChange(Number(e.currentTarget.value))}
+    style={`background: linear-gradient(to right, #30D259 ${percentage}%, #dddddd ${percentage}%)`}
+    onchange={(e) => onChange(Number(e.currentTarget.value))}
     class="w-full h-1 rounded-full appearance-none cursor-pointer dark:bg-[#38373D] bg-[#DDDDDD] slider"
   />
 </div>

src/svelte-interface/components/TabbedContainer.svelte

@@ -44,16 +44,9 @@
       window.removeEventListener("message", handleMessage);
     };
   });
-
-  /* $effect(() => {
-    if (tabs.length > 0) {
-      updateTabWidth();
-    }
-  }); */
 </script>
 
 <div bind:this={containerRef} class="top-0 z-10 text-[0.875rem] pb-0.5 mx-4 tab-width-container">
-  <div class="hidden"></div>
   <div class="relative flex">
     <MotionDiv
       class="absolute top-0 left-0 z-0 h-full bg-[#DDDDDD] dark:bg-[#38373D] rounded-full opacity-40 tab-width"