fix(VSlider): wrong tick labels positions in RTL mode (#11317)

fixes #11028
vuetifyjs · May 4, 2020 · 225e82a · 225e82a
1 parent 239e238
commit 225e82a
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 8 deletions.
diff --git a/packages/vuetify/src/components/VSlider/VSlider.sass b/packages/vuetify/src/components/VSlider/VSlider.sass
@@ -150,14 +150,14 @@
         transform: translateX(0%)
 
       +rtl()
-        transform: translateX(100%)
+        transform: translateX(0%)
 
     &:last-child .v-slider__tick-label
       +ltr()
         transform: translateX(-100%)
 
       +rtl()
-        transform: translateX(0%)
+        transform: translateX(100%)
 
     .v-slider__tick-label
       top: 8px

diff --git a/packages/vuetify/src/components/VSlider/VSlider.ts b/packages/vuetify/src/components/VSlider/VSlider.ts
@@ -314,13 +314,12 @@ export default mixins<options &
 
       const tickSize = parseFloat(this.tickSize)
       const range = createRange(this.numTicks + 1)
-      const direction = this.vertical ? 'bottom' : 'left'
-      const offsetDirection = this.vertical ? 'right' : 'top'
+      const direction = this.vertical ? 'bottom' : (this.$vuetify.rtl ? 'right' : 'left')
+      const offsetDirection = this.vertical ? (this.$vuetify.rtl ? 'left' : 'right') : 'top'
 
       if (this.vertical) range.reverse()
 
-      const ticks = range.map(i => {
-        const index = this.$vuetify.rtl ? this.maxValue - i : i
+      const ticks = range.map(index => {
         const children = []
 
         if (this.tickLabels[index]) {
@@ -329,11 +328,11 @@ export default mixins<options &
           }, this.tickLabels[index]))
         }
 
-        const width = i * (100 / this.numTicks)
+        const width = index * (100 / this.numTicks)
         const filled = this.$vuetify.rtl ? (100 - this.inputWidth) < width : width < this.inputWidth
 
         return this.$createElement('span', {
-          key: i,
+          key: index,
           staticClass: 'v-slider__tick',
           class: {
             'v-slider__tick--filled': filled,