@quen-ui/components 1.1.0 → 1.2.0

package/dist/Slider/Slider.es.js

@@ -1,272 +1,170 @@
-import { jsxs, jsx } from "react/jsx-runtime";
-import { useRef, useState, useEffect, useCallback } from "react";
-import { SliderContainer, SliderTrackStyled, SliderProgressStyled, SliderTooltipStyled, SliderThumbStyled, SliderMarksWrapperStyled, SliderMarkStyled, SliderDotStyled, SliderLabelStyled } from "./styles.es.js";
+import { jsxs, jsx, Fragment } from "react/jsx-runtime";
+import { useState, useCallback } from "react";
+import { SliderTooltipStyled, SliderThumbStyled, SliderContainer, SliderTrackStyled, SliderProgressStyled, SliderMarksWrapperStyled, SliderMarkStyled, SliderDotStyled, SliderLabelStyled } from "./styles.es.js";
 import { cnMerge } from "@quen-ui/helpers";
+import { useSlider } from "./useSlider.es.js";
 const Slider = ({
-  value = 0,
   min = 0,
   max = 100,
   step = 1,
-  onChange,
-  showTooltip = true,
-  range,
+  range = false,
   orientation = "horizontal",
   marks = [],
-  draggableTrack,
+  disabled = false,
+  showTooltip = true,
+  draggableTrack = false,
+  color = "violet",
   tooltip,
   style,
   className,
-  disabled,
-  color = "violet"
+  value,
+  onChange
 }) => {
-  const trackRef = useRef(null);
-  const draggableRef = useRef(false);
-  const initialValue = (_value) => {
-    if (!range) {
-      return Array.isArray(_value) ? _value : [_value ?? min, _value ?? min];
-    }
-    return Array.isArray(_value) ? _value : [min, max];
-  };
-  const [startEndValues, setStartEndValues] = useState(
-    initialValue(value)
-  );
-  const [currentHandle, setCurrentHandle] = useState(
-    null
-  );
-  const [isMouseDown, setIsMouseDown] = useState(false);
-  useEffect(() => {
-    setStartEndValues(initialValue(value));
-  }, [value]);
-  const clamp = (val) => Math.min(max, Math.max(min, val));
-  const snap = (raw) => {
-    return clamp(Math.round(raw / step) * step);
-  };
-  const percentOf = (v) => (v - min) / (max - min) * 100;
-  const updateValue = useCallback(
-    (newVal) => {
-      if (newVal[0] !== startEndValues[0] || newVal[1] !== startEndValues[1] || newVal[0] == 0 && newVal[1] == 0) {
-        setStartEndValues(newVal);
-        onChange?.(range ? newVal : newVal[1]);
-      }
+  const {
+    values,
+    trackRef,
+    percentStart,
+    percentEnd,
+    onPointerDownThumb,
+    onPointerDownTrack,
+    onKeyDown,
+    isDragging
+  } = useSlider({
+    value,
+    min,
+    max,
+    step,
+    onChange,
+    range,
+    disabled,
+    orientation,
+    draggableTrack
+  });
+  const [isActive, setIsActive] = useState(false);
+  const renderThumb = useCallback(
+    (target, currentValue, percent) => {
+      const valText = `${target === "start" ? "From" : "To"} ${currentValue}`;
+      const isVert = orientation === "vertical";
+      return /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            position: "absolute",
+            zIndex: 2,
+            overflow: "visible",
+            [isVert ? "top" : "left"]: isVert ? `${100 - percent}%` : `${percent}%`,
+            [isVert ? "left" : "top"]: "50%",
+            transform: "translate(-50%, -50%)"
+          },
+          children: [
+            /* @__PURE__ */ jsx(
+              SliderTooltipStyled,
+              {
+                isVertical: isVert,
+                open: isActive,
+                show: showTooltip,
+                text: currentValue,
+                position: isVert ? "right" : "top",
+                value: percent,
+                ...tooltip,
+                classNameContent: cnMerge(
+                  "quen-ui__slider__tooltip__content",
+                  tooltip?.classNameContent
+                ),
+                children: null
+              }
+            ),
+            /* @__PURE__ */ jsx(
+              SliderThumbStyled,
+              {
+                role: "slider",
+                tabIndex: disabled ? -1 : 0,
+                "aria-disabled": disabled,
+                "aria-orientation": orientation,
+                "aria-valuemin": min,
+                "aria-valuemax": max,
+                "aria-valuenow": currentValue,
+                "aria-valuetext": valText,
+                "aria-label": range ? valText : "Slider value",
+                disabled,
+                color,
+                isVertical: isVert,
+                onPointerDown: (e) => {
+                  setIsActive(true);
+                  onPointerDownThumb(target, e);
+                },
+                onPointerUp: () => setIsActive(false),
+                onMouseEnter: () => setIsActive(true),
+                onMouseLeave: () => !isDragging && setIsActive(false),
+                onFocus: () => setIsActive(true),
+                onBlur: () => !isDragging && setIsActive(false),
+                onKeyDown: (e) => onKeyDown(target, e)
+              }
+            )
+          ]
+        },
+        target
+      );
     },
-    [range, onChange]
+    [
+      orientation,
+      showTooltip,
+      tooltip,
+      disabled,
+      min,
+      max,
+      color,
+      range,
+      isDragging,
+      isActive,
+      onPointerDownThumb,
+      onKeyDown
+    ]
   );
-  const setByValue = (raw, target) => {
-    const snapped = snap(raw);
-    let next = [0, 0];
-    if (target === "end") {
-      next = [startEndValues[0], snapped];
-    } else if (target === "start") {
-      next = [snapped, startEndValues[1]];
-    } else if (!range) {
-      next = [snapped, snapped];
-    } else if (range) {
-      const distanceToStart = Math.abs(snapped - startEndValues[0]);
-      const distanceToEnd = Math.abs(snapped - startEndValues[1]);
-      next = distanceToStart <= distanceToEnd ? [snapped, startEndValues[1]] : [startEndValues[0], snapped];
-    }
-    if (next[0] > next[1]) {
-      next = [next[1], next[0]];
-    }
-    updateValue(next);
-  };
-  const handleTrackClick = (e) => {
-    if (!trackRef.current || draggableRef.current) return;
-    const rect = trackRef.current.getBoundingClientRect();
-    const startClient = "touches" in e ? e.touches[0] : e;
-    const ratio = orientation === "vertical" ? 1 - (startClient.clientY - rect.top) / rect.height : (startClient.clientX - rect.left) / rect.width;
-    const raw = min + ratio * (max - min);
-    setByValue(raw);
-  };
-  const handleMove = (e, target) => {
-    if (!trackRef.current) return;
-    const rect = trackRef.current.getBoundingClientRect();
-    const client = "touches" in e ? e.touches[0] : e;
-    let ratio = orientation === "vertical" ? 1 - (client.clientY - rect.top) / rect.height : (client.clientX - rect.left) / rect.width;
-    ratio = Math.min(1, Math.max(0, ratio));
-    const rawValue = min + ratio * (max - min);
-    setByValue(rawValue, target);
-  };
-  const bindEvents = (target) => ({
-    onMouseDown: (e) => {
-      e.preventDefault();
-      setCurrentHandle(target);
-      setIsMouseDown(true);
-      const move = (ev) => handleMove(ev, target);
-      const up = () => {
-        setCurrentHandle(null);
-        setIsMouseDown(false);
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", up, { capture: true });
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", up, { capture: true });
-    },
-    onTouchStart: () => {
-      setCurrentHandle(target);
-      setIsMouseDown(true);
-      const move = (ev) => handleMove(ev, target);
-      const up = () => {
-        setCurrentHandle(null);
-        setIsMouseDown(false);
-        document.removeEventListener("touchmove", move);
-        document.removeEventListener("touchend", up);
-      };
-      document.addEventListener("touchmove", move);
-      document.addEventListener("touchend", up);
-    },
-    onMouseMove: () => {
-      setCurrentHandle(target);
-    },
-    onMouseLeave: () => {
-      if (!isMouseDown) {
-        setCurrentHandle(null);
-      }
-    }
-  });
-  const startDragWholeRange = (e) => {
-    if (!draggableTrack || !range || !trackRef.current) {
-      handleTrackClick(e);
-    } else {
-      const rect = trackRef.current.getBoundingClientRect();
-      const startClient = "touches" in e ? e.touches[0] : e;
-      const startRatio = orientation === "vertical" ? 1 - (startClient.clientY - rect.top) / rect.height : (startClient.clientX - rect.left) / rect.width;
-      const startValue = min + startRatio * (max - min);
-      const rangeSize = startEndValues[1] - startEndValues[0];
-      const offsetInsideRange = startValue - startEndValues[0];
-      const move = (ev) => {
-        const client = "touches" in ev ? ev.touches[0] : ev;
-        let ratio = orientation === "vertical" ? 1 - (client.clientY - rect.top) / rect.height : (client.clientX - rect.left) / rect.width;
-        ratio = Math.min(1, Math.max(0, ratio));
-        const rawValue = min + ratio * (max - min);
-        let newStart = rawValue - offsetInsideRange;
-        let newEnd = newStart + rangeSize;
-        if (newStart < min) {
-          newStart = min;
-          newEnd = min + rangeSize;
-        }
-        if (newEnd > max) {
-          newStart = max - rangeSize;
-        }
-        const snappedStart = snap(newStart);
-        const snappedEnd = snap(snappedStart + rangeSize);
-        const next = [snappedStart, snappedEnd];
-        updateValue(next);
-      };
-      const stop = () => {
-        document.removeEventListener("mousemove", move);
-        document.removeEventListener("mouseup", stop);
-        document.removeEventListener("touchmove", move);
-        document.removeEventListener("touchend", stop);
-        setTimeout(() => {
-          draggableRef.current = false;
-        }, 500);
-      };
-      document.addEventListener("mousemove", move);
-      document.addEventListener("mouseup", stop);
-      document.addEventListener("touchmove", move);
-      document.addEventListener("touchend", stop);
-    }
-  };
   return /* @__PURE__ */ jsxs(
     SliderContainer,
     {
       disabled,
       style,
       className,
-      role: "slider",
-      "aria-label": "slider",
-      "aria-orientation": orientation,
-      "aria-disabled": disabled,
-      "aria-valuemax": max,
-      "aria-valuemin": min,
-      "aria-valuenow": startEndValues[0],
+      role: "group",
+      "aria-label": "Slider",
       children: [
         /* @__PURE__ */ jsx(
           SliderTrackStyled,
           {
-            "data-testid": "slider-track",
-            disabled,
             ref: trackRef,
+            disabled,
             isVertical: orientation === "vertical",
-            onClick: handleTrackClick
+            onPointerDown: onPointerDownTrack
           }
         ),
         /* @__PURE__ */ jsx(
           SliderProgressStyled,
           {
             isRange: range,
-            range: [percentOf(startEndValues[0]), percentOf(startEndValues[1])],
-            "data-testid": "slider-progress",
+            range: [percentStart, percentEnd],
             disabled,
             color,
-            onMouseDown: startDragWholeRange,
-            onTouchStart: startDragWholeRange,
             isVertical: orientation === "vertical"
           }
         ),
-        range && /* @__PURE__ */ jsx(
-          SliderTooltipStyled,
-          {
-            isVertical: orientation === "vertical",
-            open: currentHandle === "start",
-            show: showTooltip,
-            text: startEndValues[0],
-            position: orientation === "vertical" ? "right" : "top",
-            value: percentOf(startEndValues[0]),
-            ...tooltip,
-            classNameContent: cnMerge(
-              "quen-ui__slider__tooltip__content",
-              tooltip?.classNameContent
-            ),
-            children: /* @__PURE__ */ jsx(
-              SliderThumbStyled,
-              {
-                disabled,
-                color,
-                isVertical: orientation === "vertical",
-                ...bindEvents("start")
-              }
-            )
-          }
-        ),
-        /* @__PURE__ */ jsx(
-          SliderTooltipStyled,
-          {
-            isVertical: orientation === "vertical",
-            open: currentHandle === "end",
-            show: showTooltip,
-            text: startEndValues[1],
-            position: orientation === "vertical" ? "right" : "top",
-            value: percentOf(startEndValues[1]),
-            ...tooltip,
-            classNameContent: cnMerge(
-              "quen-ui__slider__tooltip__content",
-              tooltip?.classNameContent
-            ),
-            children: /* @__PURE__ */ jsx(
-              SliderThumbStyled,
-              {
-                disabled,
-                color,
-                isVertical: orientation === "vertical",
-                ...bindEvents("end")
-              }
-            )
-          }
-        ),
+        range ? /* @__PURE__ */ jsxs(Fragment, { children: [
+          renderThumb("start", values[0], percentStart),
+          renderThumb("end", values[1], percentEnd)
+        ] }) : renderThumb("end", values[1], percentEnd),
         /* @__PURE__ */ jsx(SliderMarksWrapperStyled, { isVertical: orientation === "vertical", children: marks.map((m) => /* @__PURE__ */ jsxs(
           SliderMarkStyled,
           {
             className: m.className,
-            onClick: (e) => {
-              console.log(e);
+            style: m.style,
+            isVertical: orientation === "vertical",
+            value: (m.value - min) / (max - min) * 100,
+            onPointerDown: (e) => {
+              if (disabled) return;
               e.stopPropagation();
-              setByValue(m.value);
+              onPointerDownTrack(e);
             },
-            isVertical: orientation === "vertical",
-            value: percentOf(m.value),
-            style: m.style,
             children: [
               /* @__PURE__ */ jsx(SliderDotStyled, {}),
               m.label && /* @__PURE__ */ jsx(SliderLabelStyled, { isVertical: orientation === "vertical", children: m.label })

package/dist/Slider/styles.cjs.js

@@ -5,52 +5,59 @@ const Text = require("../typography/Text/Text.cjs.js");
 const Tooltip = require("../Tooltip/Tooltip.cjs.js");
 const SliderContainer = styled.div`
   position: relative;
-  margin: 0.5rem;
-  ${({ disabled }) => disabled && styled.css`
-      pointer-events: none;
-    `};
+  box-sizing: border-box;
+  padding: 0.5rem;
+  ${({ disabled }) => disabled && `pointer-events: none;`}
 `;
 const SliderTrackStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["isVertical", "size"].includes(prop)
+  shouldForwardProp: (prop) => !["isVertical", "disabled"].includes(prop)
 })`
   position: absolute;
   background: ${({ theme, disabled }) => disabled ? theme.components.Slider.trackDisabledBackgroundColor : theme.components.Slider.trackBackgroundColor};
   border-radius: ${({ theme }) => theme.components.Slider.radius};
   cursor: pointer;
-
+  
   ${({ isVertical }) => isVertical ? styled.css`
+          left: 50%;
+          top: 0;
+          bottom: 0;
           width: 6px;
-          height: 100%;
+          transform: translateX(-50%);
         ` : styled.css`
+          top: 50%;
+          left: 0;
+          right: 0;
           height: 6px;
-          width: 100%;
+          transform: translateY(-50%);
         `}
 `;
 const SliderProgressStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["isVertical", "color", "range", "isRange"].includes(prop)
+  shouldForwardProp: (prop) => !["isVertical", "color", "range", "isRange", "disabled"].includes(prop)
 })`
   position: absolute;
-  ${({ theme, isVertical }) => isVertical ? styled.css`
-          width: ${theme.components.Slider.height};
-        ` : styled.css`
-          height: ${theme.components.Slider.height};
-        `};
   background: ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
   border-radius: ${({ theme }) => theme.components.Slider.radius};
   cursor: pointer;
-
-  ${({ isVertical, range, isRange }) => isVertical ? styled.css`
+  z-index: 1;
+  
+  ${({ isVertical, range, isRange, theme }) => isVertical ? styled.css`
+          left: 50%;
+          width: ${theme.components.Slider.height || "6px"};
+          transform: translateX(-50%);
+          top: ${100 - (isRange ? range[1] : range[1])}%;
           height: ${isRange ? range[1] - range[0] : range[1]}%;
-          bottom: ${isRange ? range[0] : 0}%;
         ` : styled.css`
+          top: 50%;
+          height: ${theme.components.Slider.height || "6px"};
+          transform: translateY(-50%);
           left: ${isRange ? range[0] : 0}%;
-          width: ${isRange ? `${range[1] - range[0]}%` : `${range[1]}%`};
+          width: ${isRange ? range[1] - range[0] : range[1]}%;
         `}
 `;
 const SliderThumbStyled = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isVertical", "color"].includes(prop)
 })`
-  position: absolute;
+  position: relative;
   width: 1rem;
   height: 1rem;
   background: white;
@@ -58,7 +65,10 @@ const SliderThumbStyled = styled.div.withConfig({
     ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
   border-radius: 50%;
   cursor: grab;
-  transition: transform 0.15s ease;
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+  z-index: 2;
 
   &:active {
     cursor: ${({ disabled }) => disabled ? "not-allowed" : "grabbing"};
@@ -115,21 +125,28 @@ const SliderLabelStyled = styled(Text).attrs({ size: "s" }).withConfig({
         `}
 `;
 const SliderTooltipStyled = styled(Tooltip).withConfig({
-  shouldForwardProp: (prop) => !["isVertical", "value"].includes(prop)
+  shouldForwardProp: (prop) => !["isVertical"].includes(prop)
 })`
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  z-index: 1;
-  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  ${({ isVertical, value }) => isVertical ? styled.css`
-          bottom: ${value}%;
-          transform: translate(-25%, 25%);
+  position: absolute;
+  z-index: 100;
+  pointer-events: none;
+  user-select: none;
+  
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+  
+  ${({ isVertical }) => isVertical ? styled.css`
+          left: calc(100% + 8px);
+          top: 50%;
+          transform: translateY(-50%);
         ` : styled.css`
-          left: ${value}%;
-          transform: translate(-50%, -25%);
-        `};
+          bottom: calc(100% + 8px);
+          left: 50%;
+          transform: translateX(-50%);
+        `}
 `;
 const SliderMarksWrapperStyled = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isVertical"].includes(prop)

package/dist/Slider/styles.d.ts

@@ -28,7 +28,7 @@ export declare const SliderLabelStyled: import('styled-components/dist/types').I
 }>> & string & Omit<import('react').FC<import('..').ITextProps>, keyof import('react').Component<any, {}, any>>;
 export declare const SliderTooltipStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('..').ITooltipProps, {
     isVertical: boolean;
-    value: number;
+    open: boolean;
 }>> & string & Omit<({ children, text, position, open: controlledOpen, show, zIndex, color, width, className, classNameContent, ...props }: import('..').ITooltipProps) => React.ReactElement, keyof import('react').Component<any, {}, any>>;
 export declare const SliderMarksWrapperStyled: import('styled-components/dist/types').IStyledComponentBase<"web", import('styled-components/dist/types').Substitute<import('react').DetailedHTMLProps<import('react').HTMLAttributes<HTMLDivElement>, HTMLDivElement>, {
     isVertical: boolean;

package/dist/Slider/styles.es.js

@@ -3,52 +3,59 @@ import Text from "../typography/Text/Text.es.js";
 import Tooltip from "../Tooltip/Tooltip.es.js";
 const SliderContainer = styled.div`
   position: relative;
-  margin: 0.5rem;
-  ${({ disabled }) => disabled && css`
-      pointer-events: none;
-    `};
+  box-sizing: border-box;
+  padding: 0.5rem;
+  ${({ disabled }) => disabled && `pointer-events: none;`}
 `;
 const SliderTrackStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["isVertical", "size"].includes(prop)
+  shouldForwardProp: (prop) => !["isVertical", "disabled"].includes(prop)
 })`
   position: absolute;
   background: ${({ theme, disabled }) => disabled ? theme.components.Slider.trackDisabledBackgroundColor : theme.components.Slider.trackBackgroundColor};
   border-radius: ${({ theme }) => theme.components.Slider.radius};
   cursor: pointer;
-
+  
   ${({ isVertical }) => isVertical ? css`
+          left: 50%;
+          top: 0;
+          bottom: 0;
           width: 6px;
-          height: 100%;
+          transform: translateX(-50%);
         ` : css`
+          top: 50%;
+          left: 0;
+          right: 0;
           height: 6px;
-          width: 100%;
+          transform: translateY(-50%);
         `}
 `;
 const SliderProgressStyled = styled.div.withConfig({
-  shouldForwardProp: (prop) => !["isVertical", "color", "range", "isRange"].includes(prop)
+  shouldForwardProp: (prop) => !["isVertical", "color", "range", "isRange", "disabled"].includes(prop)
 })`
   position: absolute;
-  ${({ theme, isVertical }) => isVertical ? css`
-          width: ${theme.components.Slider.height};
-        ` : css`
-          height: ${theme.components.Slider.height};
-        `};
   background: ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
   border-radius: ${({ theme }) => theme.components.Slider.radius};
   cursor: pointer;
-
-  ${({ isVertical, range, isRange }) => isVertical ? css`
+  z-index: 1;
+  
+  ${({ isVertical, range, isRange, theme }) => isVertical ? css`
+          left: 50%;
+          width: ${theme.components.Slider.height || "6px"};
+          transform: translateX(-50%);
+          top: ${100 - (isRange ? range[1] : range[1])}%;
           height: ${isRange ? range[1] - range[0] : range[1]}%;
-          bottom: ${isRange ? range[0] : 0}%;
         ` : css`
+          top: 50%;
+          height: ${theme.components.Slider.height || "6px"};
+          transform: translateY(-50%);
           left: ${isRange ? range[0] : 0}%;
-          width: ${isRange ? `${range[1] - range[0]}%` : `${range[1]}%`};
+          width: ${isRange ? range[1] - range[0] : range[1]}%;
         `}
 `;
 const SliderThumbStyled = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isVertical", "color"].includes(prop)
 })`
-  position: absolute;
+  position: relative;
   width: 1rem;
   height: 1rem;
   background: white;
@@ -56,7 +63,10 @@ const SliderThumbStyled = styled.div.withConfig({
     ${({ theme, disabled, color = "violet" }) => disabled ? theme.components.Slider.progressDisabledBackgroundColor : theme.colors[color][9]};
   border-radius: 50%;
   cursor: grab;
-  transition: transform 0.15s ease;
+  transition:
+    box-shadow 0.15s ease,
+    transform 0.15s ease;
+  z-index: 2;
 
   &:active {
     cursor: ${({ disabled }) => disabled ? "not-allowed" : "grabbing"};
@@ -113,21 +123,28 @@ const SliderLabelStyled = styled(Text).attrs({ size: "s" }).withConfig({
         `}
 `;
 const SliderTooltipStyled = styled(Tooltip).withConfig({
-  shouldForwardProp: (prop) => !["isVertical", "value"].includes(prop)
+  shouldForwardProp: (prop) => !["isVertical"].includes(prop)
 })`
-  width: 20px;
-  height: 20px;
-  user-select: none;
-  z-index: 1;
-  position: absolute;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 
-  ${({ isVertical, value }) => isVertical ? css`
-          bottom: ${value}%;
-          transform: translate(-25%, 25%);
+  position: absolute;
+  z-index: 100;
+  pointer-events: none;
+  user-select: none;
+  
+  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
+  
+  ${({ isVertical }) => isVertical ? css`
+          left: calc(100% + 8px);
+          top: 50%;
+          transform: translateY(-50%);
         ` : css`
-          left: ${value}%;
-          transform: translate(-50%, -25%);
-        `};
+          bottom: calc(100% + 8px);
+          left: 50%;
+          transform: translateX(-50%);
+        `}
 `;
 const SliderMarksWrapperStyled = styled.div.withConfig({
   shouldForwardProp: (prop) => !["isVertical"].includes(prop)