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/Tip/SliderTooltip/SliderTooltip.tsx

@@ -0,0 +1,42 @@
+import Tippy from '@tippyjs/react';
+import clsx from 'clsx';
+
+import 'tippy.js/dist/tippy.css';
+
+import styles from './SliderTooltip.module.css';
+
+export interface Props {
+  value: string;
+  child: React.ReactElement;
+  delay: number;
+  zIndex?: number;
+}
+
+export function SliderTooltip({ value, child, delay, zIndex = 50 }: Props) {
+  return (
+    <Tippy
+      appendTo="parent"
+      zIndex={zIndex} // make the z index lower than the dialog
+      className={clsx(styles.tooltipCentered, styles.tooltip)}
+      content={messageHTML(value)}
+      placement="top"
+      showOnCreate
+      hideOnClick={false}
+      trigger="manual"
+      delay={delay}
+      arrow
+      allowHTML
+    >
+      {child}
+    </Tippy>
+  );
+}
+
+function messageHTML(value: string) {
+  let message = value;
+  if (message === '0') {
+    message = 'unlimited';
+  }
+
+  return <div className={styles.tooltipContainer}>{message}</div>;
+}