I recently developed a unique input range slider using Vue.js.
While most aspects of the slider are functioning correctly, I have encountered an issue with the cursor position not aligning properly while sliding the range slider.
- Ideally, the cursor should follow the green thumb of the slider accurately.
- However, what actually happens is that the cursor appears to be ahead of the thumb during sliding actions.
To keep things concise, I have excluded certain details in this query:
You can preview the slider without the endpoint here (expect some console errors):
The code snippet for the range input is provided below. It showcases how I bind the style with values obtained from an endpoint to compute the width and transform properties. While these bindings function correctly, the cursor positioning issue remains unresolved.
<div class="range-container">
<div
class="wrap"
:class="{ invalid: isExceedMonth }"
>
<input
type="range"
class="range2 calc-range"
value="value"
:min="duration.min"
:max="duration.max"
v-model="duration.amount"
@input="onChange2"
/>
<div class="track2">
<div
class="track-inner2"
:style="{ width: duration.amount == duration.min || isExceedMonth ? `${0}%` : `${ duration.amount / (duration.max/100) }%` }"
></div>
</div>
<div
class="thumb2"
:style="{ left: duration.amount == duration.min || isExceedMonth ? `${0}%` : `${ duration.amount / (duration.max/100) }%`, transform: duration.amount == duration.min || isExceedMonth ? `translate(-${ 0 }%, -50%)` : `translate(-${ duration.amount / (duration.max/100) }%, -50%)` }"
></div>
</div>
<div class="calc-flex mt-30" v-cloak>
<p class="min">{{ duration.min }}</p>
<p class="max">{{ duration.max }}</p>
</div>
</div>
Additionally, by inspecting the code through dev tools and removing track2 and thumb2, leaving only the input (opacity set to 1 for testing), I noticed that the thumb and cursor behavior corrected itself. However, the color distinctions (yellow and gray) were lost in this altered state. Why does my custom code introduce this particular issue?