Addition of min/max float and remaking of Float to be a slider

app/components/float.tsx

@@ -1,22 +1,47 @@
-export function Float({ float }: { float: number }) {
+import { Slider, Label } from "@heroui/react";
+import { useEffect, useState } from "react";
+
+export function Float({
+    float,
+    minFloat = 0,
+    maxFloat = 1,
+    acceptInput = false,
+}: {
+    float: number;
+    minFloat?: number;
+    maxFloat?: number;
+    acceptInput?: boolean;
+}) {
+    const [value, setValue] = useState(float);
+
+    useEffect(() => {
+        setValue(Math.max(minFloat, Math.min(maxFloat, float)));
+    }, [float, minFloat, maxFloat]);
+
+    const handleChange = (newValue: number | number[]) => {
+        const val = Array.isArray(newValue) ? newValue[0]: newValue;
+        setValue(Math.max(minFloat, Math.min(maxFloat, val)));
+    };
+
     return (
         <>
-            <div className="w-full flex justify-center relative">
-                <div
-                    className="absolute mx-1 h-4 w-1 mt-1 rounded-xl bg-white"
+            <Slider value={value} maxValue={1} step={0.0001} onChange={handleChange}>
+                <Slider.Track
+                    className="border-0 h-2 rounded-xl"
                     style={{
-                        left: `calc(${float}*100% - var(--spacing))`,
-                        transform: "translateX(-50%)",
+                        background:
+                            "linear-gradient(90deg, var(--color-green-800) 7%, var(--color-green-500) 7%, var(--color-green-500) 15%, var(--color-lime-400) 15%, var(--color-lime-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 38%, var(--color-orange-400) 45%, var(--color-red-400) 45%",
                     }}
-                ></div>
-                <div className="w-full h-2 flex my-2">
-                    <div className="w-7/100 h-full rounded-l-xl bg-green-800"></div>
-                    <div className="w-8/100 h-full bg-green-500"></div>
-                    <div className="w-23/100 h-full bg-lime-400"></div>
-                    <div className="w-7/100 h-full bg-orange-400"></div>
-                    <div className="w-55/100 h-full rounded-r-xl bg-red-400"></div>
-                </div>
-            </div>
+                >
+                    <div
+                        className="h-full rounded-xl"
+                        style={{
+                            background: `linear-gradient(90deg, rgba(0, 0, 0, 0.8) ${minFloat*100}%, transparent ${minFloat*100}%, transparent ${maxFloat*100}%, rgba(0, 0, 0, 0.8) ${maxFloat*100}%)`,
+                        }}
+                    />
+                    <Slider.Thumb className="w-1" isDisabled={!acceptInput} />
+                </Slider.Track>
+            </Slider>
         </>
     );
 }

app/components/skin_dialog.tsx

@@ -82,7 +82,7 @@ export function SkinDialog({
                                         <Typography.Paragraph>
                                             Float: {skin.float}
                                         </Typography.Paragraph>
-                                        <Float float={skin.float} />
+                                        <Float float={skin.float} minFloat={skin.min_float} maxFloat={skin.max_float} acceptInput/>
                                     </>
                                 )}
                                 {skin instanceof WeaponInfo && (

app/components/skin_tile.tsx

@@ -50,7 +50,7 @@ export function SkinTile({
                             {skin.display}
                         </Typography.Heading>
                         {skin instanceof WeaponInfo && (
-                            <Float float={skin.float} />
+                            <Float float={skin.float} minFloat={skin.min_float} maxFloat={skin.max_float}/>
                         )}
                         {skin instanceof WeaponInfo && (
                             <Typography.Paragraph>