style slider

components/TradeSimplePage.tsx

@@ -8,8 +8,8 @@ const TradeSimplePage = () => {
   const outputTokenInfo = mangoStore((s) => s.swap.outputTokenInfo)
 
   return (
-    <div className="grid grid-cols-12 gap-x-6 gap-y-8">
-      <div className="col-span-12 space-y-12 md:col-span-6 lg:col-span-8">
+    <div className="grid grid-cols-12 gap-x-6">
+      <div className="col-span-12 mb-8 md:col-span-6 md:mb-0 lg:col-span-8">
         <SwapTokenChart
           inputTokenId={inputTokenInfo?.extensions?.coingeckoId}
           outputTokenId={outputTokenInfo?.extensions?.coingeckoId}

components/swap/LeverageSlider.tsx

@@ -16,6 +16,12 @@ const LeverageSlider = ({
   onChange: (x: any) => any
 }) => {
   const handleSliderChange = (e: ChangeEvent<HTMLInputElement>) => {
+    let target = e.target
+    const min = parseFloat(target.min)
+    const max = parseFloat(target.max)
+    const val = parseFloat(target.value)
+
+    target.style.backgroundSize = ((val - min) * 100) / (max - min) + '% 100%'
     onChange(e.target.value)
   }
 
@@ -28,7 +34,7 @@ const LeverageSlider = ({
         min="0"
         max={leverageMax}
         step={0.000001}
-        className="h-2 w-full cursor-pointer appearance-none rounded-lg bg-th-bkg-4 hover:bg-gradient-to-r hover:from-gradient-start hover:via-gradient-mid hover:to-gradient-end"
+        className="w-full"
         onChange={handleSliderChange}
       ></input>
     </>

components/swap/Swap.tsx

@@ -280,7 +280,7 @@ const Swap = () => {
       </div>
       {useMargin ? (
         <>
-          <div className="mb-2 flex items-center justify-between">
+          <div className="mb-1 flex items-center justify-between">
             <p className="text-th-fgd-3">{t('leverage')}</p>
             <p className="text-th-fgd-1">0.00x</p>
           </div>

styles/globals.css

@@ -288,3 +288,17 @@ table p {
 .thin-scroll::-webkit-scrollbar-thumb:window-inactive {
   @apply bg-th-bkg-4;
 }
+
+/* slider */
+
+input[type='range'] {
+  @apply h-2 appearance-none rounded bg-th-bkg-4 bg-gradient-to-r from-gradient-start via-gradient-mid to-gradient-end bg-[length:70%_100%] bg-no-repeat;
+}
+
+input[type='range']::-webkit-slider-thumb {
+  @apply h-5 w-5 cursor-ew-resize appearance-none rounded-full bg-th-primary;
+}
+
+input[type='range']::-webkit-slider-runnable-track {
+  @apply appearance-none border-0 bg-transparent shadow-none;
+}