From 450f8c84eb66f0d68ae84d9dfec4adb7594d1174 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jakob=20Gr=C3=B8tan=20Gregusson?=
 <55840686+Jakobgg1243@users.noreply.github.com>
Date: Tue, 16 Apr 2024 14:50:44 +0200
Subject: [PATCH] feat(frontend): :sparkles: Change to slider (#306)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Co-authored-by: Jakob Grøtan Gregusson <jakobgg@stud.ntnu.no>
---
 frontend/src/components/2dmap/Map2d.tsx | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/frontend/src/components/2dmap/Map2d.tsx b/frontend/src/components/2dmap/Map2d.tsx
index 149cb9b..5171954 100644
--- a/frontend/src/components/2dmap/Map2d.tsx
+++ b/frontend/src/components/2dmap/Map2d.tsx
@@ -85,7 +85,7 @@ export default function Map2d({ satName }: { satName: string }) {
     }, [satelliteData, satName, projectionAmount]);
 
     // Function to handle projection amount change
-    const handleInputChange = (event: { target: { value: any } }) => {
+    const handleSliderChange = (event: { target: { value: any } }) => {
         const value = event.target.value;
         // Update the inputValue state
         setInputValue(value);
@@ -105,11 +105,13 @@ export default function Map2d({ satName }: { satName: string }) {
                 </h1>
                 <div className="flex flex-col items-end">
                     <input
-                        type="number"
+                        type="range"
+                        min="-120"
+                        max="120"
+                        step="10"
                         value={inputValue}
-                        onChange={handleInputChange}
-                        className="focus:primary rounded-lg bg-gray-200 px-3 py-2 text-black focus:outline-none focus:ring"
-                        placeholder="Enter projection amount"
+                        onChange={handleSliderChange}
+                        className="rounded-lg bg-gray-200 py-2 text-black focus:outline-none focus:ring"
                     />
                     <p className="mt-2 font-thin">
                         Positions {projectionAmount} minutes into the{" "}