refactor: use third party component for sliders

package.json

@@ -18,6 +18,7 @@
     "clsx": "^2.1.1",
     "next": "15.0.3",
     "plotly.js": "^2.35.2",
+    "rc-slider": "^11.1.7",
     "react": "19.0.0-rc-66855b96-20241106",
     "react-dom": "19.0.0-rc-66855b96-20241106",
     "react-plotly.js": "^2.6.0",

src/app/moods/components/MoodsDisplay.tsx

@@ -23,11 +23,12 @@ export default function MoodsDisplay() {
     adrenaline: 1,
   });
 
-  const handleChange = (value: number, chem: string) => {
+  const handleChange = (value: number | number[], chem: string) => {
     setNeuroState((prev) => ({
       ...prev,
       [chem]: value,
     }));
+    console.log(neuroState);
   };
 
   const submitMood = () => {

src/app/moods/components/Slider.tsx

@@ -1,4 +1,6 @@
 import { NeurochemState } from "./MoodsDisplay";
+import Slider from "rc-slider";
+import "rc-slider/assets/index.css";
 
 interface SliderProps {
   chem: "dopamine" | "serotonin" | "adrenaline";
@@ -9,12 +11,12 @@ interface SliderProps {
   ) => void;
   neuroState: NeurochemState;
 }
-export function Slider({ chem, label, handleChange, neuroState }: SliderProps) {
-  const normaliseValue = (value: unknown): number => {
-    if (value instanceof Date) return value.getTime();
-    if (typeof value === "number") return value;
-    return 1;
-  };
+export function MoodSlider({ chem, label, handleChange }: SliderProps) {
+  // const normaliseValue = (value: unknown): number => {
+  //   if (value instanceof Date) return value.getTime();
+  //   if (typeof value === "number") return value;
+  //   return 1;
+  // };
 
   const renderText =
     label === "Step 2. How much effort does it take?" ? (
@@ -34,14 +36,15 @@ export function Slider({ chem, label, handleChange, neuroState }: SliderProps) {
       <label htmlFor={chem} className="text-white text-md mb-4">
         {label}
       </label>
-      <input
-        id={chem}
-        type="range"
-        min="1"
-        max="10"
-        value={normaliseValue(neuroState[chem])}
-        onChange={(e) => handleChange(parseInt(e.target.value), chem)}
-        className="w-full m-auto range-slider"
+      <Slider
+        // id={chem}
+        onChange={(value) => handleChange(value as number, chem)} // Ensure the value is a number
+        styles={{
+          rail: { backgroundColor: "#893FFC" },
+          track: { backgroundColor: "#ffc100" },
+        }}
+        min={1}
+        max={10}
       />
       <div className="flex justify-between mt-4 w-full m-auto">
         {renderText}

src/app/moods/components/SliderBox.tsx

@@ -1,4 +1,4 @@
-import { Slider } from "./Slider";
+import { MoodSlider } from "./Slider";
 import { NeurochemState } from "./MoodsDisplay";
 
 interface SliderBoxProps {
@@ -18,7 +18,10 @@ const sliders: {
   { chem: "adrenaline", label: "Step 3. Does it feel worth doing?" },
 ];
 
-export default function SliderBox({ handleChange, neuroState }: SliderBoxProps) {
+export default function SliderBox({
+  handleChange,
+  neuroState,
+}: SliderBoxProps) {
   return (
     <form className="flex flex-col gap-4 w-10/12 m-auto">
       <fieldset>
@@ -27,7 +30,7 @@ export default function SliderBox({ handleChange, neuroState }: SliderBoxProps)
         </legend>
         {sliders.map((slider) => {
           return (
-            <Slider
+            <MoodSlider
               key={slider.chem}
               chem={slider.chem}
               label={slider.label}