chore: update price range slider to rc-slider (#4980)

* chore: update price range slider to rc-slider

* removing styles

* decreasing stepsize

package.json

@@ -80,7 +80,6 @@
     "@types/react-dom": "^18.0.6",
     "@types/react-redux": "^7.1.24",
     "@types/react-router-dom": "^5.3.3",
-    "@types/react-slider": "^1.3.1",
     "@types/react-table": "^7.7.12",
     "@types/react-virtualized-auto-sizer": "^1.0.0",
     "@types/react-window": "^1.8.2",
@@ -195,6 +194,7 @@
     "polyfill-object.fromentries": "^1.0.1",
     "popper-max-size-modifier": "^0.2.0",
     "qs": "^6.9.4",
+    "rc-slider": "^10.0.1",
     "react": "^18.2.0",
     "react-confetti": "^6.0.0",
     "react-dom": "^18.2.0",
@@ -208,7 +208,6 @@
     "react-redux": "^8.0.2",
     "react-relay": "^14.1.0",
     "react-router-dom": "^6.3.0",
-    "react-slider": "^2.0.4",
     "react-spring": "^9.5.5",
     "react-table": "^7.8.0",
     "react-use-gesture": "^6.0.14",

src/nft/components/collection/PriceRange.css.ts

 import { style } from '@vanilla-extract/css'
 import { body } from 'nft/css/common.css'
-import { sprinkles, themeVars } from 'nft/css/sprinkles.css'
-
-// https://www.npmjs.com/package/react-slider
-// https://codesandbox.io/s/peaceful-pine-gqszx6?file=/src/styles.css:587-641
-
-export const sliderLight = style([
-  sprinkles({
-    height: '8',
-    marginTop: '20',
-    borderRadius: '8',
-    width: 'full',
-  }),
-])
-
-export const sliderDark = style([
-  sliderLight,
-  sprinkles({
-    backgroundColor: 'accentAction',
-  }),
-])
-
-export const tracker = style([
-  sprinkles({
-    backgroundColor: 'accentAction',
-    height: '8',
-  }),
-  {
-    selectors: {
-      '&:nth-child(1)': {
-        backgroundColor: themeVars.colors.accentActionSoft,
-        borderRadius: 8,
-        opacity: 0.65,
-      },
-      '&:nth-child(3)': {
-        backgroundColor: themeVars.colors.accentActionSoft,
-        borderRadius: 8,
-        opacity: 0.65,
-      },
-    },
-  },
-])
-
-export const thumb = style([
-  sprinkles({
-    width: '12',
-    height: '20',
-    borderRadius: '4',
-    cursor: 'pointer',
-    boxShadow: 'shallow',
-    backgroundColor: 'grey50',
-  }),
-  {
-    top: -6,
-  },
-])
+import { sprinkles } from 'nft/css/sprinkles.css'
 
 export const priceInput = style([
   body,

src/nft/components/collection/PriceRange.tsx

+import 'rc-slider/assets/index.css'
+
 import { Box } from 'nft/components/Box'
 import { Row } from 'nft/components/Flex'
 import { NumericInput } from 'nft/components/layout/Input'
@@ -7,15 +9,19 @@ import { useCollectionFilters } from 'nft/hooks/useCollectionFilters'
 import { usePriceRange } from 'nft/hooks/usePriceRange'
 import { TraitPosition } from 'nft/hooks/useTraitsOpen'
 import { scrollToTop } from 'nft/utils/scrollToTop'
+import { default as Slider } from 'rc-slider'
 import { FormEvent, useEffect, useState } from 'react'
 import { FocusEventHandler } from 'react'
 import { useLocation } from 'react-router-dom'
-import ReactSlider from 'react-slider'
-import { useIsDarkMode } from 'state/user/hooks'
+import styled, { useTheme } from 'styled-components/macro'
 
 import * as styles from './PriceRange.css'
 import { TraitsHeader } from './TraitsHeader'
 
+const StyledSlider = styled(Slider)`
+  cursor: pointer;
+`
+
 export const PriceRange = () => {
   const [placeholderText, setPlaceholderText] = useState('')
   const setMinPrice = useCollectionFilters((state) => state.setMinPrice)
@@ -28,7 +34,7 @@ export const PriceRange = () => {
   const setPriceRangeHigh = usePriceRange((statae) => statae.setPriceRangeHigh)
   const prevMinMax = usePriceRange((state) => state.prevMinMax)
   const setPrevMinMax = usePriceRange((state) => state.setPrevMinMax)
-  const isDarktheme = useIsDarkMode()
+  const theme = useTheme()
 
   const isMobile = useIsMobile()
   const location = useLocation()
@@ -97,7 +103,9 @@ export const PriceRange = () => {
     scrollToTop()
   }
 
-  const handleSliderLogic = (minMax: Array<number>) => {
+  const handleSliderLogic = (minMax: number | Array<number>) => {
+    if (typeof minMax === 'number') return
+
     const [newMin, newMax] = minMax
 
     // strip commas so parseFloat can parse properly
@@ -160,14 +168,33 @@ export const PriceRange = () => {
         </Row>
       </Row>
 
-      <Row marginBottom="20" paddingLeft="8" paddingRight="8">
-        <ReactSlider
-          disabled={!priceRangeLow || !priceRangeHigh}
+      <Row marginTop="24" marginBottom="12" paddingLeft="8" paddingRight="8">
+        <StyledSlider
           defaultValue={[0, 100]}
+          min={0}
+          max={100}
+          range
+          step={0.0001}
           value={prevMinMax}
-          className={isDarktheme ? styles.sliderDark : styles.sliderLight}
-          trackClassName={styles.tracker}
-          thumbClassName={styles.thumb}
+          trackStyle={{
+            top: '3px',
+            height: '8px',
+            background: `${theme.accentAction}`,
+          }}
+          handleStyle={{
+            top: '3px',
+            width: '12px',
+            height: '20px',
+            backgroundColor: `${theme.textPrimary}`,
+            borderRadius: '4px',
+            border: 'none',
+            boxShadow: `${theme.shallowShadow.slice(0, -1)}`,
+          }}
+          railStyle={{
+            top: '3px',
+            height: '8px',
+            backgroundColor: `${theme.accentActionSoft}`,
+          }}
           onChange={handleSliderLogic}
         />
       </Row>

yarn.lock

@@ -1074,10 +1074,10 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@>=7.17.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
-  version "7.18.9"
-  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.9.tgz#b4fcfce55db3d2e5e080d2490f608a3b9f407f4a"
-  integrity sha512-lkqXDcvlFT5rvEjiu6+QYO+1GXrEHRo2LOtS7E4GtX5ESIZOgepqsZBVIj6Pv+a6zqsya9VCgiK1KAK4BvJDAw==
+"@babel/runtime@>=7.17.0", "@babel/runtime@^7.0.0", "@babel/runtime@^7.10.1", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.7.6", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+  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"
 
@@ -3799,13 +3799,6 @@
     "@types/history" "*"
     "@types/react" "*"
 
-"@types/react-slider@^1.3.1":
-  version "1.3.1"
-  resolved "https://registry.yarnpkg.com/@types/react-slider/-/react-slider-1.3.1.tgz#a3816989eb4fc172e7df316930f242fec90690fc"
-  integrity sha512-4X2yK7RyCIy643YCFL+bc6XNmcnBtt8n88uuyihvcn5G7Lut23eNQU3q3KmwF7MWIfKfsW5NxCjw0SeDZRtgaA==
-  dependencies:
-    "@types/react" "*"
-
 "@types/react-table@^7.7.12":
   version "7.7.12"
   resolved "https://registry.yarnpkg.com/@types/react-table/-/react-table-7.7.12.tgz#628011d3cb695b07c678704a61f2f1d5b8e567fd"
@@ -6677,10 +6670,10 @@ class-utils@^0.3.5:
     isobject "^3.0.0"
     static-extend "^0.1.1"
 
-classnames@^2.3.1:
-  version "2.3.1"
-  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.1.tgz#dfcfa3891e306ec1dad105d0e88f4417b8535e8e"
-  integrity sha512-OlQdbZ7gLfGarSqxesMesDa5uz7KFbID8Kpq/SxIoNGDqY8lSYs0D+hhtBXhcdB3rcbXArFr7vlHheLk1voeNA==
+classnames@^2.2.5, classnames@^2.3.1:
+  version "2.3.2"
+  resolved "https://registry.yarnpkg.com/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924"
+  integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==
 
 clean-css@^4.2.3:
   version "4.2.3"
@@ -14488,7 +14481,7 @@ prompts@2.4.0, prompts@^2.0.1:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@^15.5.10, prop-types@^15.6.0, prop-types@^15.6.1, prop-types@^15.6.2, prop-types@^15.7.2:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -14727,6 +14720,25 @@ raw-body@2.4.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.0.1, rc@^1.1.6:
   version "1.2.8"
   resolved "https://registry.npmjs.org/rc/-/rc-1.2.8.tgz"
@@ -15016,13 +15028,6 @@ react-scripts@^4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-slider@^2.0.4:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/react-slider/-/react-slider-2.0.4.tgz#21c656ffabc3bb4481cf6b49e6d647baeda83572"
-  integrity sha512-sWwQD01n6v+MbeLCYthJGZPc0kzOyhQHyd0bSo0edg+IAxTVQmj3Oy4SBK65eX6gNwS9meUn6Z5sIBUVmwAd9g==
-  dependencies:
-    prop-types "^15.8.1"
-
 react-spring@^9.5.5:
   version "9.5.5"
   resolved "https://registry.yarnpkg.com/react-spring/-/react-spring-9.5.5.tgz#314009a65efc04d0ef157d3d60590dbb9de65f3c"