slider: smarter step increments; disable clicking on track

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"
+          max="205"
-          value={amount ?? 0}
+          value={getRaw(amount ?? 0)}
-          onChange={(e) => onAmountChange(parseInt(e.target.value))}
+          onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
-          className="range range-lg z-40 mb-2 xl:hidden"
+          className="range range-lg only-thumb z-40 mb-2 xl:hidden"
           step="5"
         />
       )}

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',
+          },
+        },
       })
     }),
   ],