add handle to setpoint

src/components/bar.svelte

@@ -1,19 +1,30 @@
 <script lang="ts">
 	import { draggable } from "@neodrag/svelte";
+	import { onMount, afterUpdate } from "svelte";
 
 	import { tweened } from "svelte/motion";
 	import { quintOut } from "svelte/easing";
-
 	export let progress = 0;
 
+	
+	
 	export let withSetpoint = false;
 	export let setpoint = 0;
 	export let onSetpointChange = (e: number) => {};
 
 	let bar;
-	const tweenedProgress = tweened(0, { duration: 100, easing: quintOut });
+	let point;
+	let pos = {x: 0, y: 0};
+	const tweenedProgress = tweened(0, { duration: 200, easing: quintOut });
 
-	if(bar){
+	onMount(() => {
+		let rect = bar.getBoundingClientRect();
+		let prect = point.getBoundingClientRect();
+		pos.y = -(setpoint / 100) * rect.height + prect.height;
+	});
+
+	
+	$: if (bar) {
 		$tweenedProgress = (progress / 100) * bar.getBoundingClientRect().height;
 	}
 </script>
@@ -21,31 +32,49 @@
 <div bind:this={bar} class="bar-container">
 	{#if withSetpoint}
 		<div
+			bind:this={point}
 			class="setpoint"
-			style="bottom: {setpoint}%"
 			use:draggable={{
+				onDragStart: () => (pos = undefined),
+				handle: ".handle",
+				position: pos,
 				axis: "y",
 				bounds: "parent",
 				onDragEnd: (e) => {
 					let rect = bar.getBoundingClientRect();
-					let y = ( e.domRect.y - rect.y + (e.domRect.height / 2)) / (rect.height);
+					let y = ( e.domRect.y - rect.y + (e.domRect.height/ 2)) / (rect.height);
 					onSetpointChange(1.0 - y);
 				},
 			}}
-		/>
+				 >
+			<div class="handle">
+				
+			</div>
+	</div>
 	{/if}
 	<div class="bar" style="height: {$tweenedProgress}px;" />
 </div>
 
 <style lang="scss">
-	.bar-container {
 		.setpoint {
 			position: absolute;
 			background-color: black;
-			width: 120%;
-			height: 2vh;
-			left: -10%;
+			width: 100%;
+			height: 0.5vh;
 		}
+	
+	.handle {
+			position: absolute;
+		  border-top: 10px solid transparent;
+  		border-bottom: 10px solid transparent;  
+  		border-right: 10px solid var(--handle-color, forestgreen);
+			right: -2.5vh;
+			transform: translateY(-45%);
+}
+	
+	.bar-container {
+		border-radius: var(--bar-radius, 0px);
+		position: absolute;
 		display: flex;
 		flex-direction: column;
 		justify-content: flex-end;
@@ -56,10 +85,12 @@
 	}
 
 	.bar {
+		border-radius: inherit;
 		user-select: none;
 		width: 100%;
 		border: 0;
 		margin: 0;
 		background-color: var(--bar-color, blue);
+		transition: background-color 0.1s ;
 	}
-</style>
+</style>