mobile bet slider

web/components/amount-input.tsx

@@ -84,6 +84,7 @@ export function BuyAmountInput(props: {
   setError: (error: string | undefined) => void
   minimumAmount?: number
   disabled?: boolean
+  showSliderOnMobile?: boolean
   className?: string
   inputClassName?: string
   // Needed to focus the amount input
@@ -94,6 +95,7 @@ export function BuyAmountInput(props: {
     onChange,
     error,
     setError,
+    showSliderOnMobile: showSlider,
     disabled,
     className,
     inputClassName,
@@ -121,6 +123,7 @@ export function BuyAmountInput(props: {
   }
 
   return (
+    <>
       <AmountInput
         amount={amount}
         onChange={onAmountChange}
@@ -131,5 +134,17 @@ export function BuyAmountInput(props: {
         inputClassName={inputClassName}
         inputRef={inputRef}
       />
+      {showSlider && (
+        <input
+          type="range"
+          min="0"
+          max="250"
+          value={amount ?? 0}
+          onChange={(e) => onAmountChange(parseInt(e.target.value))}
+          className="xl:hidden"
+          step="25"
+        />
+      )}
+    </>
   )
 }

web/components/answers/answer-bet-panel.tsx

@@ -136,6 +136,7 @@ export function AnswerBetPanel(props: {
         Amount
         <span>Balance: {formatMoney(user?.balance ?? 0)}</span>
       </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -144,6 +145,7 @@ export function AnswerBetPanel(props: {
         setError={setError}
         disabled={isSubmitting}
         inputRef={inputRef}
+        showSliderOnMobile
       />
 
       {(betAmount ?? 0) > 10 &&

web/components/bet-panel.tsx

@@ -313,6 +313,7 @@ function BuyPanel(props: {
           Balance: {formatMoney(user?.balance ?? 0)}
         </span>
       </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -321,6 +322,7 @@ function BuyPanel(props: {
         setError={setError}
         disabled={isSubmitting}
         inputRef={inputRef}
+        showSliderOnMobile
       />
 
       {warning}
@@ -609,6 +611,7 @@ function LimitOrderPanel(props: {
           Balance: {formatMoney(user?.balance ?? 0)}
         </span>
       </Row>
+
       <BuyAmountInput
         inputClassName="w-full max-w-none"
         amount={betAmount}
@@ -616,6 +619,7 @@ function LimitOrderPanel(props: {
         error={error}
         setError={setError}
         disabled={isSubmitting}
+        showSliderOnMobile
       />
 
       <Col className="mt-3 w-full gap-3">