From ea09f325a0268952174c1a23127af7e6f703ec27 Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 18:50:11 -0800
Subject: [PATCH] fix slider value handling and track width

- Use single value instead of array for type="single" slider
- Pass onValueChange directly without array wrapping
- Use flex-grow: 1 for track width instead of width: 100%
---
 src/lib/components/ui/Slider.svelte | 11 +++--------
 1 file changed, 3 insertions(+), 8 deletions(-)

diff --git a/src/lib/components/ui/Slider.svelte b/src/lib/components/ui/Slider.svelte
index fae295a3..778e7ded 100644
--- a/src/lib/components/ui/Slider.svelte
+++ b/src/lib/components/ui/Slider.svelte
@@ -32,17 +32,12 @@
 		element,
 		class: className = ''
 	}: Props = $props()
-
-	function handleValueChange(values: number[]) {
-		const newValue = values[0] ?? min
-		onValueChange?.(newValue)
-	}
 </script>
 
 <SliderPrimitive.Root
 	type="single"
-	value={[value]}
-	onValueChange={handleValueChange}
+	{value}
+	{onValueChange}
 	{min}
 	{max}
 	{step}
@@ -78,7 +73,7 @@
 
 	:global(.slider-track) {
 		position: relative;
-		width: 100%;
+		flex-grow: 1;
 		height: $unit-half;
 		background: var(--slider-track-bg, var(--button-bg));
 		border-radius: $full-corner;