fix(VSlider): correct display and interaction when reversed or rtl

fixes #18389
fixes #18312

Author: KaelWD

packages/vuetify/src/components/VSlider/VSliderThumb.sass

@@ -96,7 +96,9 @@
 
     +tools.ltr()
       left: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
+      right: unset
     +tools.rtl()
+      left: unset
       right: calc(var(--v-slider-thumb-position) - var(--v-slider-thumb-size) / 2)
 
   .v-slider-thumb__label-container

packages/vuetify/src/components/VSlider/VSliderThumb.tsx

@@ -65,7 +65,7 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
 
   setup (props, { slots, emit }) {
     const slider = inject(VSliderSymbol)
-    const { rtlClasses } = useRtl()
+    const { isRtl, rtlClasses } = useRtl()
     if (!slider) throw new Error('[Vuetify] v-slider-thumb must be used inside v-slider or v-range-slider')
 
     const {
@@ -75,12 +75,13 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
       thumbSize,
       thumbLabel,
       direction,
+      isReversed,
+      vertical,
       readonly,
       elevation,
-      horizontalDirection,
       mousePressed,
       decimals,
-      isNotVerticalAndReversed,
+      indexFromEnd,
     } = slider
 
     const { textColorClasses, textColorStyles } = useTextColor(thumbColor)
@@ -101,7 +102,9 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
       const _step = step.value || 0.1
       const steps = (props.max - props.min) / _step
       if ([left, right, down, up].includes(e.key)) {
-        const increase = horizontalDirection.value === 'rtl' ? [left, up] : [right, up]
+        const increase = vertical.value
+          ? [isRtl.value ? left : right, isReversed.value ? down : up]
+          : indexFromEnd.value !== isRtl.value ? [left, up] : [right, up]
         const direction = increase.includes(e.key) ? 1 : -1
         const multiplier = e.shiftKey ? 2 : (e.ctrlKey ? 1 : 0)
 
@@ -125,7 +128,7 @@ export const VSliderThumb = genericComponent<VSliderThumbSlots>()({
     }
 
     useRender(() => {
-      const positionPercentage = convertToUnit(isNotVerticalAndReversed.value ? 100 - props.position : props.position, '%')
+      const positionPercentage = convertToUnit(indexFromEnd.value ? 100 - props.position : props.position, '%')
       const { elevationClasses } = useElevation(computed(() => !disabled.value ? elevation.value : undefined))
 
       return (

packages/vuetify/src/components/VSlider/VSliderTrack.tsx

@@ -47,7 +47,6 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
 
     const {
       color,
-      horizontalDirection,
       parsedTicks,
       rounded,
       showTicks,
@@ -58,7 +57,7 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
       vertical,
       min,
       max,
-      isNotVerticalAndReversed,
+      indexFromEnd,
     } = slider
 
     const { roundedClasses } = useRounded(rounded)
@@ -73,12 +72,12 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
       backgroundColorStyles: trackColorStyles,
     } = useBackgroundColor(trackColor)
 
-    const startDir = computed(() => `inset-${vertical.value ? 'block-end' : 'inline-start'}`)
+    const startDir = computed(() => `inset-${vertical.value ? 'block' : 'inline'}-${indexFromEnd.value ? 'end' : 'start'}`)
     const endDir = computed(() => vertical.value ? 'height' : 'width')
 
     const backgroundStyles = computed(() => {
       return {
-        [startDir.value]: isNotVerticalAndReversed.value && '0%',
+        [startDir.value]: '0%',
         [endDir.value]: '100%',
       }
     })
@@ -87,7 +86,7 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
 
     const trackFillStyles = computed(() => {
       return {
-        [startDir.value]: isNotVerticalAndReversed.value && convertToUnit(props.start, '%'),
+        [startDir.value]: convertToUnit(props.start, '%'),
         [endDir.value]: convertToUnit(trackFillWidth.value, '%'),
       }
     })
@@ -98,7 +97,6 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
       const ticks = vertical.value ? parsedTicks.value.slice().reverse() : parsedTicks.value
 
       return ticks.map((tick, index) => {
-        const directionProperty = vertical.value ? 'bottom' : 'margin-inline-start'
         const directionValue = tick.value !== min.value && tick.value !== max.value ? convertToUnit(tick.position, '%') : undefined
 
         return (
@@ -112,7 +110,7 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
                 'v-slider-track__tick--last': tick.value === max.value,
               },
             ]}
-            style={{ [directionProperty]: directionValue }}
+            style={{ [startDir.value]: directionValue }}
           >
             {
               (tick.label || slots['tick-label']) && (
@@ -138,7 +136,6 @@ export const VSliderTrack = genericComponent<VSliderTrackSlots>()({
             {
               '--v-slider-track-size': convertToUnit(trackSize.value),
               '--v-slider-tick-size': convertToUnit(tickSize.value),
-              direction: !vertical.value ? horizontalDirection.value : undefined,
             },
             props.style,
           ]}

packages/vuetify/src/components/VSlider/slider.ts

@@ -52,8 +52,7 @@ type SliderProvide = {
   parsedTicks: Ref<Tick[]>
   hasLabels: Ref<boolean>
   isReversed: Ref<boolean>
-  isNotVerticalAndReversed: Ref<boolean>
-  horizontalDirection: Ref<'ltr' | 'rtl'>
+  indexFromEnd: Ref<boolean>
 }
 
 export const VSliderSymbol: InjectionKey<SliderProvide> = Symbol.for('vuetify:v-slider')
@@ -182,16 +181,7 @@ export const useSlider = ({
   const { isRtl } = useRtl()
   const isReversed = toRef(props, 'reverse')
   const vertical = computed(() => props.direction === 'vertical')
-  const isNotVerticalAndReversed = computed(() => vertical.value !== isReversed.value)
-  const horizontalDirection = computed(() => {
-    let hd: 'ltr' | 'rtl' = isRtl.value ? 'rtl' : 'ltr'
-
-    if (isNotVerticalAndReversed.value) {
-      hd = hd === 'rtl' ? 'ltr' : 'rtl'
-    }
-
-    return hd
-  })
+  const indexFromEnd = computed(() => vertical.value !== isReversed.value)
 
   const { min, max, step, decimals, roundValue } = steps
 
@@ -226,7 +216,7 @@ export const useSlider = ({
     // It is possible for left to be NaN, force to number
     let clickPos = Math.min(Math.max((clickOffset - trackStart - startOffset.value) / trackLength, 0), 1) || 0
 
-    if (isNotVerticalAndReversed.value || horizontalDirection.value === 'rtl') clickPos = 1 - clickPos
+    if (vertical ? indexFromEnd.value : indexFromEnd.value !== isRtl.value) clickPos = 1 - clickPos
 
     return roundValue(min.value + clickPos * (max.value - min.value))
   }
@@ -331,9 +321,8 @@ export const useSlider = ({
     direction: toRef(props, 'direction'),
     elevation: toRef(props, 'elevation'),
     hasLabels,
-    horizontalDirection,
     isReversed,
-    isNotVerticalAndReversed,
+    indexFromEnd,
     min,
     max,
     mousePressed,