Vuetify 3 v-slider with RTL (right to left) support

v-slider-rtl.md

Vuetify-3 bug Nov-25 regarding v-slider with RTL

Description

When creating an audio-player bar under RTL direction, I encountered two problems:

1. Thumb goes in wrong direction, from left to right.
2. Clicking on the track to move to a new position, cause a jump to the other direction, i.e., if I click at 20%, it jumps to 80%.

Solution

Here is my patch:

/* slider component */
<v-slider
  v-model="currentTime"
  :max="duration"
  :step="0.1"
  hide-details
  class="mt-2 playerSlider"
  color="white"
  :disabled="!currentPlaying"
  @update:model-value="seekTrack"
></v-slider>

// seekTrack: negate the values:
const seekTrack = (value) => {
  if (audioPlayer.value) {
    let pos = duration.value - value
    isSeeking.value = true
    audioPlayer.value.currentTime = pos
    currentTime.value = pos
    // Allow timeupdate to resume after a short delay
    setTimeout(() => {
      isSeeking.value = false
    }, 200)
  }
}

/* style: fix thumb direction */
:deep(.playerSlider .v-slider-thumb) {
  direction: rtl;
}