From eac56b1f4f267af58c401ab3ca8d3270c65f0247 Mon Sep 17 00:00:00 2001
From: mantikoros <sgrugett@gmail.com>
Date: Thu, 8 Sep 2022 23:55:33 -0500
Subject: [PATCH] slider: smarter step increments; disable clicking on track

---
 web/components/amount-input.tsx | 20 ++++++++++++++++----
 web/tailwind.config.js          | 12 ++++++++++++
 2 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/web/components/amount-input.tsx b/web/components/amount-input.tsx
index 9eff26ef..2ad745a8 100644
--- a/web/components/amount-input.tsx
+++ b/web/components/amount-input.tsx
@@ -122,6 +122,18 @@ export function BuyAmountInput(props: {
     }
   }
 
+  const parseRaw = (x: number) => {
+    if (x <= 100) return x
+    if (x <= 130) return 100 + (x - 100) * 5
+    return 250 + (x - 130) * 10
+  }
+
+  const getRaw = (x: number) => {
+    if (x <= 100) return x
+    if (x <= 250) return 100 + (x - 100) / 5
+    return 130 + (x - 250) / 10
+  }
+
   return (
     <>
       <AmountInput
@@ -138,10 +150,10 @@ export function BuyAmountInput(props: {
         <input
           type="range"
           min="0"
-          max="200"
-          value={amount ?? 0}
-          onChange={(e) => onAmountChange(parseInt(e.target.value))}
-          className="range range-lg z-40 mb-2 xl:hidden"
+          max="205"
+          value={getRaw(amount ?? 0)}
+          onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
+          className="range range-lg only-thumb z-40 mb-2 xl:hidden"
           step="5"
         />
       )}
diff --git a/web/tailwind.config.js b/web/tailwind.config.js
index 566404fa..eb411216 100644
--- a/web/tailwind.config.js
+++ b/web/tailwind.config.js
@@ -60,6 +60,18 @@ module.exports = {
           'overflow-wrap': 'anywhere',
           'word-break': 'break-word', // for Safari
         },
+        '.only-thumb': {
+          'pointer-events': 'none',
+          '&::-webkit-slider-thumb': {
+            'pointer-events': 'auto !important',
+          },
+          '&::-moz-range-thumb': {
+            'pointer-events': 'auto !important',
+          },
+          '&::-ms-thumb': {
+            'pointer-events': 'auto !important',
+          },
+        },
       })
     }),
   ],