feat: reverse slider mode

lerna.json

@@ -3,7 +3,7 @@
     "packages/*",
     "icons"
   ],
-  "version": "5.11.0",
+  "version": "5.11.1-alpha.0",
   "npmClient": "yarn",
   "useWorkspaces": true,
   "useNx": false

packages/Slider/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@welcome-ui/slider",
-  "version": "5.6.1",
+  "version": "5.11.1-alpha.0",
   "description": "Customizable design system with react • styled-components • styled-system and ariakit.",
   "main": "dist/index.js",
   "module": "dist/index.mjs",

packages/Slider/src/index.tsx

@@ -21,6 +21,7 @@ export interface SliderOptions
   borderSelectorColor?: string
   label?: string
   hint?: string
+  reverse?: boolean
   step?: number
   type?: Type
   values?: number[]
@@ -47,6 +48,7 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
       max,
       min,
       onChange,
+      reverse = false,
       step = 1,
       tooltip,
       type,
@@ -114,15 +116,21 @@ export const SliderComponent = forwardRef<'div', SliderProps>(
     // Updates the slider range when user drag the slider
     useEffect(() => {
       if (range.current) {
-        range.current.style.backgroundSize = `${getPercent(localValue)}% 100%`
+        if (!reverse) {
+          range.current.style.backgroundSize = `${getPercent(localValue)}% 100%`
+        } else {
+          const percentage = 100 - getPercent(localValue)
+          range.current.style.backgroundSize = `${percentage}%`
+          range.current.style.backgroundPosition = 'right'
+        }
       }
       if (tooltipRef.current) {
         const fraction = getPercent(localValue) / 100
         tooltipRef.current.style.left = `calc(${fraction * 100}% + ${
           (0.5 - fraction) * thumbWidth
         }px)`
       }
-    }, [localValue, getPercent])
+    }, [localValue, getPercent, reverse])
 
     // Give the possibility to the parent to modify the value from outside but we need to check if it respect the step
     useEffect(() => {