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/components/form-components/Slider/Slider.tsx

@@ -1,5 +1,8 @@
+import { useCallback } from 'react';
 import RcSlider from 'rc-slider';
 
+import { SliderTooltip } from '@@/Tip/SliderTooltip';
+
 import styles from './Slider.module.css';
 import 'rc-slider/assets/index.css';
 
@@ -8,7 +11,7 @@ export interface Props {
   max: number;
   step: number;
   value: number;
-  onChange: (value: number) => void;
+  onChange: (value: number | number[]) => void;
   // true if you want to always show the tooltip
   dataCy: string;
   visibleTooltip?: boolean;
@@ -23,29 +26,33 @@ export function Slider({
   dataCy,
   visibleTooltip: visible,
 }: Props) {
-  const SliderWithTooltip = RcSlider.createSliderWithTooltip(RcSlider);
-  // if the tooltip is always visible, hide the marks when tooltip value gets close to the edges
   const marks = {
     [min]: visible && value / max < 0.1 ? '' : translateMinValue(min),
     [max]: visible && value / max > 0.9 ? '' : max.toString(),
   };
 
+  const sliderTooltip = useCallback(
+    (node, handleProps) => (
+      <SliderTooltip
+        value={translateMinValue(handleProps.value)}
+        child={node}
+        delay={0}
+      />
+    ),
+    []
+  );
+
   return (
     <div className={styles.root}>
-      <SliderWithTooltip
-        tipFormatter={translateMinValue}
+      <RcSlider
+        handleRender={sliderTooltip}
         min={min}
         max={max}
-        step={step}
         marks={marks}
-        defaultValue={value}
-        onAfterChange={onChange}
-        className={styles.slider}
-        tipProps={{ visible }}
-        railStyle={{ height: 8 }}
-        trackStyle={{ height: 8 }}
-        dotStyle={{ visibility: 'hidden' }}
+        step={step}
         data-cy={dataCy}
+        value={value}
+        onChange={onChange}
       />
     </div>
   );