From 82a7745ebad25bf11008fee935a22d82ad0e4523 Mon Sep 17 00:00:00 2001
From: raichev-dima <raichevdp@gmail.com>
Date: Thu, 9 Jan 2025 16:31:08 +0300
Subject: [PATCH] fix(slider#4446): update the dot handler position

---
 packages/ui/src/components/va-slider/VaSlider.vue | 9 +++++----
 1 file changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/ui/src/components/va-slider/VaSlider.vue b/packages/ui/src/components/va-slider/VaSlider.vue
index ffe708bb43..52ef165f4d 100644
--- a/packages/ui/src/components/va-slider/VaSlider.vue
+++ b/packages/ui/src/components/va-slider/VaSlider.vue
@@ -68,12 +68,12 @@
         v-bind="sliderAriaAttributes(getValueByOrder(order), order)"
         @focus="currentSliderDotIndex = order"
       >
-        <div
+        <span
           v-if="isActiveDot(order)"
           :style="{ backgroundColor: getColor($props.color) }"
           class="va-slider__handler__dot--focus"
         />
-        <div
+        <span
           v-if="trackLabelVisible"
           :style="labelStyles"
           class="va-slider__handler__dot--value"
@@ -84,7 +84,7 @@
           >
             {{ getTrackLabel(getValueByOrder(order), order) }}
           </slot>
-        </div>
+        </span>
       </button>
     </div>
     <span
@@ -750,10 +750,11 @@ watch(hasMouseDown, (hasMouseDown) => {
 
     &__dot--focus {
       transform: var(--va-slider-dot-transform);
+      position: absolute;
+      top: 0;
       display: block;
       width: var(--va-slider-dot-width);
       height: var(--va-slider-dot-height);
-      position: absolute;
       border-radius: var(--va-slider-dot-border-radius);
       opacity: var(--va-slider-dot-opacity);
       pointer-events: var(--va-slider-dot-pointer-events);