src/components/GetStarted/LoanAmountComp.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import { InputCompOne } from "..";
 
 const LoanAmountComp: React.FC = () => {
+  const [value, setValue] = React.useState(6);
+
+  const handleSliderChange = (e) => {
+    setValue(e.target.value);
+  };
+
   return (
     <>
       <div className="flex justify-between items-center w-full mt-8 mb-[45px]">
@@ -20,7 +26,7 @@ const LoanAmountComp: React.FC = () => {
           </p>
         </div>
       </div>
-      <div className="flex flex-col gap-[2.8125rem] justify-center ml-[2.5rem]">
+      <div className="flex flex-col gap-[2.8125rem] justify-center ml-[2.5rem] mb-[2.5rem]">
         <InputCompOne
           parentClass="max-w-[471px] w-full"
           label="Your Monthly Salary*"
@@ -65,6 +71,17 @@ const LoanAmountComp: React.FC = () => {
             </div>
           </div>
 
+          <Slider handleSliderChange={handleSliderChange} value={value} />
+
+          <div className="w-full flex items-center justify-center flex-col">
+            <div className="w-[17.4375rem] h-[8.125rem] mb-[4.75rem] flex items-center justify-center flex-col">
+              <p className="text-[#FBB700]">Your Monthly Repayment</p>
+              <p>N</p>
+            </div>
+            <button className="max-w-[28.875rem] w-full bg-[#5C2684] rounded text-white h-11">
+              Submit
+            </button>
+          </div>
         </div>
       </div>
     </>
@@ -72,3 +89,29 @@ const LoanAmountComp: React.FC = () => {
 };
 
 export default LoanAmountComp;
+
+const Slider = ({ handleSliderChange, value }) => {
+  return (
+    <div className="flex flex-col items-start mt-11 mb-16">
+      <p className="text-lg font-semibold">For how many months?</p>
+      <div className="w-full">
+        <input
+          type="range"
+          min="6"
+          max="24"
+          value={value}
+          onChange={handleSliderChange}
+          className="slider w-full h-2 bg-gray-300 rounded-lg appearance-none cursor-pointer"
+          style={{
+            background: `linear-gradient(90deg, #6B21A8 ${
+              ((value - 6) / 18) * 100
+            }%, #D1D5DB ${((value - 6) / 18) * 100}%)`,
+          }}
+        />
+      </div>
+      <div className="mt-4 text-lg font-semibold text-gray-700 w-full flex items-center text-center justify-center">
+        {value} months
+      </div>
+    </div>
+  );
+};