fix: prevent cursor flickering when dragging slider handles

Fix issue where mouse cursor flickers between 'grabbing' and 'default'
while dragging slider handles. The cursor now remains 'grabbing'
throughout the entire drag operation regardless of mouse position.

Changes:
- Add dynamic 'is-dragging' class to SingleSlider and DualRangeSlider
- Apply cursor: grabbing to root component when dragging state is active
This commit is contained in:
Will Miao
2026-01-14 11:46:32 +08:00
parent 394eebe070
commit 73f2a34d08
4 changed files with 50 additions and 36 deletions

View File

@@ -1,5 +1,5 @@
<template>
<div class="dual-range-slider" :class="{ disabled, 'has-segments': scaleMode === 'segmented' && effectiveSegments.length > 0 }" @wheel="onWheel">
<div class="dual-range-slider" :class="{ disabled, 'is-dragging': dragging !== null, 'has-segments': scaleMode === 'segmented' && effectiveSegments.length > 0 }" @wheel="onWheel">
<div class="slider-track" ref="trackEl">
<!-- Background track -->
<div class="slider-track__bg"></div>
@@ -331,6 +331,10 @@ onUnmounted(() => {
pointer-events: none;
}
.dual-range-slider.is-dragging {
cursor: grabbing;
}
.slider-track {
position: absolute;
top: 14px;

View File

@@ -1,5 +1,5 @@
<template>
<div class="single-slider" :class="{ disabled }" @wheel="onWheel">
<div class="single-slider" :class="{ disabled, 'is-dragging': dragging }" @wheel="onWheel">
<div class="slider-track" ref="trackEl">
<div class="slider-track__bg"></div>
<div
@@ -153,6 +153,10 @@ onUnmounted(() => {
pointer-events: none;
}
.single-slider.is-dragging {
cursor: grabbing;
}
.slider-track {
position: absolute;
top: 14px;