add text below swap slider

components/swap/SwapForm.tsx

@@ -429,7 +429,7 @@ const SwapForm = () => {
             <TokenVaultWarnings bank={inputBank} />
           </div>
         ) : null}
-        <div className="space-y-2 pt-2">
+        <div className="space-y-2">
           <div id="swap-step-four">
             <HealthImpact maintProjectedHealth={maintProjectedHealth} />
           </div>
@@ -480,7 +480,7 @@ const SwapFormSubmitButton = ({
   return (
     <Button
       onClick={() => setShowConfirm(true)}
-      className="mt-6 flex w-full items-center justify-center text-base"
+      className="mt-7 flex w-full items-center justify-center text-base"
       disabled={disabled}
       size="large"
     >

components/swap/SwapSlider.tsx

@@ -1,4 +1,7 @@
+import mangoStore from '@store/mangoStore'
 import useMangoAccount from 'hooks/useMangoAccount'
+import { useCallback, useEffect, useState } from 'react'
+import { formatFixedDecimals } from 'utils/numbers'
 import LeverageSlider from '../shared/LeverageSlider'
 import { useTokenMax } from './useTokenMax'
 
@@ -13,8 +16,21 @@ const SwapSlider = ({
   useMargin: boolean
   step: number
 }) => {
+  const [sliderValue, setSliderValue] = useState(0)
   const { mangoAccount } = useMangoAccount()
   const { amount: tokenMax, amountWithBorrow } = useTokenMax(useMargin)
+  const inputBank = mangoStore((s) => s.swap.inputBank)
+
+  const handleChange = useCallback((x: string) => {
+    setSliderValue(parseFloat(x))
+    onChange(x)
+  }, [])
+
+  useEffect(() => {
+    setSliderValue(amount)
+  }, [amount])
+
+  const tokenMaxAsNumber = tokenMax.toNumber()
 
   return (
     <>
@@ -26,14 +42,25 @@ const SwapSlider = ({
           step={step}
         />
       ) : (
+        <>
           <LeverageSlider
             amount={amount}
             leverageMax={
               useMargin ? amountWithBorrow.toNumber() : tokenMax.toNumber()
             }
-          onChange={onChange}
+            onChange={handleChange}
             step={step}
           />
+          {sliderValue && sliderValue > tokenMaxAsNumber ? (
+            <div className="flex">
+              <div className="mt-1 ml-1 -mb-5 text-xs text-th-fgd-4">
+                Use {formatFixedDecimals(tokenMaxAsNumber)} {inputBank?.name} +
+                Borrow {formatFixedDecimals(sliderValue - tokenMaxAsNumber)}{' '}
+                {inputBank?.name}
+              </div>
+            </div>
+          ) : null}
+        </>
       )}
     </>
   )