From 615c43f72a1cd56a36fa4cf99e9ddab9689d83b2 Mon Sep 17 00:00:00 2001
From: "gpt-engineer-app[bot]"
 <159125892+gpt-engineer-app[bot]@users.noreply.github.com>
Date: Mon, 21 Jul 2025 07:44:25 +0000
Subject: [PATCH] Enhance slider UX

Make sliders "snappy" to multiples of 10 and add indicators to both ends.
---
 src/components/BalancedTernaryGame.tsx | 23 +++++++++++++++++++----
 src/components/TernaryNumberGame.tsx   | 23 +++++++++++++++++++----
 2 files changed, 38 insertions(+), 8 deletions(-)

diff --git a/src/components/BalancedTernaryGame.tsx b/src/components/BalancedTernaryGame.tsx
index eb57c0b..4ec6baf 100644
--- a/src/components/BalancedTernaryGame.tsx
+++ b/src/components/BalancedTernaryGame.tsx
@@ -183,14 +183,29 @@ const BalancedTernaryGame: React.FC<BalancedTernaryGameProps> = ({ showSocialSha
         <Card className="p-6">
           <div className="space-y-4">
             <Label className="text-lg font-semibold">Target Number Range</Label>
-            <div className="space-y-2">
+            <div className="space-y-4">
               <div className="flex justify-between text-sm text-muted-foreground">
-                <span>Min: {targetRange[0]}</span>
-                <span>Max: {targetRange[1]}</span>
+                <div className="flex items-center space-x-2">
+                  <div className="w-3 h-3 bg-primary rounded-full"></div>
+                  <span>Min: {targetRange[0]}</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <span>Max: {targetRange[1]}</span>
+                  <div className="w-3 h-3 bg-primary rounded-full"></div>
+                </div>
               </div>
               <Slider
                 value={targetRange}
-                onValueChange={(value) => setTargetRange(value as [number, number])}
+                onValueChange={(value) => {
+                  // Snap to multiples of 10 if close enough
+                  const snappedValue = value.map(v => {
+                    const remainder = Math.abs(v) % 10;
+                    if (remainder <= 2) return v - Math.sign(v) * remainder;
+                    if (remainder >= 8) return v + Math.sign(v) * (10 - remainder);
+                    return v;
+                  });
+                  setTargetRange(snappedValue as [number, number]);
+                }}
                 min={-3280}
                 max={3280}
                 step={1}
diff --git a/src/components/TernaryNumberGame.tsx b/src/components/TernaryNumberGame.tsx
index e4c3f7d..190a5c0 100644
--- a/src/components/TernaryNumberGame.tsx
+++ b/src/components/TernaryNumberGame.tsx
@@ -134,14 +134,29 @@ const TernaryNumberGame: React.FC<TernaryNumberGameProps> = ({ showSocialShare =
         <Card className="p-6">
           <div className="space-y-4">
             <Label className="text-lg font-semibold">Target Number Range</Label>
-            <div className="space-y-2">
+            <div className="space-y-4">
               <div className="flex justify-between text-sm text-muted-foreground">
-                <span>Min: {targetRange[0]}</span>
-                <span>Max: {targetRange[1]}</span>
+                <div className="flex items-center space-x-2">
+                  <div className="w-3 h-3 bg-primary rounded-full"></div>
+                  <span>Min: {targetRange[0]}</span>
+                </div>
+                <div className="flex items-center space-x-2">
+                  <span>Max: {targetRange[1]}</span>
+                  <div className="w-3 h-3 bg-primary rounded-full"></div>
+                </div>
               </div>
               <Slider
                 value={targetRange}
-                onValueChange={(value) => setTargetRange(value as [number, number])}
+                onValueChange={(value) => {
+                  // Snap to multiples of 10 if close enough
+                  const snappedValue = value.map(v => {
+                    const remainder = v % 10;
+                    if (remainder <= 2) return v - remainder;
+                    if (remainder >= 8) return v + (10 - remainder);
+                    return v;
+                  });
+                  setTargetRange(snappedValue as [number, number]);
+                }}
                 min={1}
                 max={3280}
                 step={1}