un-daisy slider

web/components/amount-input.tsx

@@ -7,6 +7,9 @@ import { ENV_CONFIG } from 'common/envs/constants'
 import { Row } from './layout/row'
 import { AddFundsModal } from './add-funds-modal'
 import { Input } from './input'
+import Slider from 'rc-slider'
+import 'rc-slider/assets/index.css'
+import { transform } from 'lodash'
 
 export function AmountInput(props: {
   amount: number | undefined
@@ -145,7 +148,7 @@ export function BuyAmountInput(props: {
 
   return (
     <>
-      <Row className="gap-4">
+      <Row className="items-center gap-4">
         <AmountInput
           amount={amount}
           onChange={onAmountChange}
@@ -157,14 +160,23 @@ export function BuyAmountInput(props: {
           inputRef={inputRef}
         />
         {showSlider && (
-          <input
-            type="range"
-            min="0"
-            max="205"
+          <Slider
+            min={0}
+            max={205}
             value={getRaw(amount ?? 0)}
-            onChange={(e) => onAmountChange(parseRaw(parseInt(e.target.value)))}
-            className="range range-lg only-thumb my-auto align-middle xl:hidden"
-            step="5"
+            onChange={(value) => onAmountChange(parseRaw(value as number))}
+            className="mx-4 !h-4 xl:hidden [&>.rc-slider-rail]:bg-gray-200 [&>.rc-slider-track]:bg-indigo-400 [&>.rc-slider-handle]:bg-indigo-400"
+            railStyle={{ height: 16, top: 0, left: 0 }}
+            trackStyle={{ height: 16, top: 0 }}
+            handleStyle={{
+              height: 32,
+              width: 32,
+              opacity: 1,
+              border: 'none',
+              boxShadow: 'none',
+              top: -2,
+            }}
+            step={5}
           />
         )}
       </Row>

web/package.json

@@ -54,6 +54,7 @@
     "next": "12.3.1",
     "node-fetch": "3.2.4",
     "prosemirror-state": "1.4.1",
+    "rc-slider": "10.0.1",
     "react": "18.2.0",
     "react-confetti": "6.0.1",
     "react-dom": "18.2.0",

web/tailwind.config.js

@@ -61,18 +61,6 @@ 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',
-          },
-        },
       })
     }),
   ],

yarn.lock

@@ -1303,6 +1303,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.10.1", "@babel/runtime@^7.18.3":
+  version "7.19.4"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.19.4.tgz#a42f814502ee467d55b38dd1c256f53a7b885c78"
+  integrity sha512-EXpLCrk55f+cYqmHsSR+yD/0gAIMxxA9QK9lnQWzhMCvt+YmoBN7Zx94s++Kv0+unHk39vxNO8t+CMA2WSS3wA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.3", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.17.2", "@babel/runtime@^7.8.4":
   version "7.18.3"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
@@ -10182,6 +10189,25 @@ raw-body@2.5.1, raw-body@^2.2.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
+rc-slider@10.0.1:
+  version "10.0.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-10.0.1.tgz#7058c68ff1e1aa4e7c3536e5e10128bdbccb87f9"
+  integrity sha512-igTKF3zBet7oS/3yNiIlmU8KnZ45npmrmHlUUio8PNbIhzMcsh+oE/r2UD42Y6YD2D/s+kzCQkzQrPD6RY435Q==
+  dependencies:
+    "@babel/runtime" "^7.10.1"
+    classnames "^2.2.5"
+    rc-util "^5.18.1"
+    shallowequal "^1.1.0"
+
+rc-util@^5.18.1:
+  version "5.24.4"
+  resolved "https://registry.yarnpkg.com/rc-util/-/rc-util-5.24.4.tgz#a4126f01358c86f17c1bf380a1d83d6c9155ae65"
+  integrity sha512-2a4RQnycV9eV7lVZPEJ7QwJRPlZNc06J7CwcwZo4vIHr3PfUqtYgl1EkUV9ETAc6VRRi8XZOMFhYG63whlIC9Q==
+  dependencies:
+    "@babel/runtime" "^7.18.3"
+    react-is "^16.12.0"
+    shallowequal "^1.1.0"
+
 rc@^1.2.8:
   version "1.2.8"
   resolved "https://registry.yarnpkg.com/rc/-/rc-1.2.8.tgz#cd924bf5200a075b83c188cd6b9e211b7fc0d3ed"
@@ -10312,7 +10338,7 @@ react-instantsearch-hooks@6.24.1:
     dequal "^2.0.0"
     instantsearch.js "^4.40.1"
 
-react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
+react-is@^16.12.0, react-is@^16.13.1, react-is@^16.6.0, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==