From 8ddfe58369e4105c703ae7edc915bbd94d90f83b Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Wed, 3 Dec 2025 18:45:53 -0800
Subject: [PATCH] fix slider range width by adding track wrapper element

The bits-ui Slider.Range component needs to be inside a proper
track element for the range fill to display correctly. Added a
span wrapper with slider-track class and updated styles.
---
 src/lib/components/ui/Slider.svelte | 26 +++++++++++++-------------
 1 file changed, 13 insertions(+), 13 deletions(-)

diff --git a/src/lib/components/ui/Slider.svelte b/src/lib/components/ui/Slider.svelte
index 8c7dae6b..fae295a3 100644
--- a/src/lib/components/ui/Slider.svelte
+++ b/src/lib/components/ui/Slider.svelte
@@ -49,7 +49,9 @@
 	{disabled}
 	class="slider {element ?? ''} {className}"
 >
-	<SliderPrimitive.Range class="slider-range" />
+	<span class="slider-track">
+		<SliderPrimitive.Range class="slider-range" />
+	</span>
 	<SliderPrimitive.Thumb index={0} class="slider-thumb" />
 </SliderPrimitive.Root>
 
@@ -68,26 +70,24 @@
 		touch-action: none;
 		user-select: none;
 
-		// Track
-		&::before {
-			content: '';
-			position: absolute;
-			left: 0;
-			right: 0;
-			height: $unit-half;
-			background: var(--slider-track-bg, var(--button-bg));
-			border-radius: $full-corner;
-		}
-
 		&[data-disabled] {
 			opacity: 0.5;
 			cursor: not-allowed;
 		}
 	}
 
+	:global(.slider-track) {
+		position: relative;
+		width: 100%;
+		height: $unit-half;
+		background: var(--slider-track-bg, var(--button-bg));
+		border-radius: $full-corner;
+		overflow: hidden;
+	}
+
 	:global(.slider-range) {
 		position: absolute;
-		height: $unit-half;
+		height: 100%;
 		background: var(--slider-range-bg, var(--accent-blue));
 		border-radius: $full-corner;
 	}