fix(slider): update rc-slider [EE-5011] (#8611)

* fix(slider): update rc-slider [EE-5011]

* fix PasswordLengthSlider tooltip

* fix unnecessarily bulky className for SliderTooltip

* remove SliderTooltip inner div

* center slider handle value

* relative tooltip

* update z index

---------

Co-authored-by: testa113 <testa113>

app/react/portainer/settings/AuthenticationView/InternalAuth/PasswordLengthSlider/PasswordLengthSlider.tsx

@@ -1,7 +1,10 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';
 import clsx from 'clsx';
 import { Lock, XCircle, CheckCircle } from 'lucide-react';
 
+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import 'rc-slider/assets/index.css';
 
 import { Badge } from '../Badge';
@@ -13,7 +16,7 @@ export interface Props {
   max: number;
   step: number;
   value: number;
-  onChange(value: number): void;
+  onChange(value: number | number[]): void;
 }
 
 type Strength = 'weak' | 'good' | 'strong' | 'veryStrong';
@@ -44,8 +47,6 @@ const sliderProperties: Record<
   },
 };
 
-const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-
 export function PasswordLengthSlider({
   min,
   max,
@@ -85,31 +86,32 @@ export function PasswordLengthSlider({
     }
   }
 
-  function handleChange(sliderValue: number) {
+  function handleChange(sliderValue: number | number[]) {
     onChange(sliderValue);
   }
 
+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={`${handleProps.value} characters`}
+        child={node}
+        delay={800}
+      />
+    ),
+    []
+  );
+
   return (
     <div className={clsx(styles.root, styles[sliderProps.strength])}>
       <div className="col-sm-4">
-        <SliderWithTooltip
-          tipFormatter={(value) => `${value} characters`}
+        <RcSlider
+          handleRender={sliderTooltip}
           min={min}
           max={max}
           step={step}
           defaultValue={12}
           value={value}
           onChange={handleChange}
-          handleStyle={{
-            height: 25,
-            width: 25,
-            borderWidth: 1.85,
-            borderColor: sliderProps.color,
-            top: 1.5,
-            boxShadow: 'none',
-          }}
-          railStyle={{ height: 10 }}
-          trackStyle={{ backgroundColor: sliderProps.color, height: 10 }}
         />
       </div>