feat(QSlider/QRange): RTL support

Author: rstoenescu

src/components/range/QRange.js

@@ -134,7 +134,7 @@ export default {
       }
 
       let
-        percentage = getPercentage(event, this.dragging),
+        percentage = getPercentage(event, this.dragging, this.$q.i18n.rtl),
         type
 
       if (percentage < this.currentMinPercentage + sensitivity) {
@@ -170,7 +170,7 @@ export default {
     },
     __update (event) {
       let
-        percentage = getPercentage(event, this.dragging),
+        percentage = getPercentage(event, this.dragging, this.$q.i18n.rtl),
         model = getModel(percentage, this.min, this.max, this.step, this.computedDecimals),
         pos
 
@@ -269,7 +269,7 @@ export default {
         ref: `handle${upper}`,
         staticClass: `q-slider-handle q-slider-handle-${lower}`,
         style: {
-          left: `${percentage * 100}%`,
+          [this.$q.i18n.rtl ? 'right' : 'left']: `${percentage * 100}%`,
           borderRadius: this.square ? '0' : '50%'
         },
         'class': [
@@ -298,7 +298,7 @@ export default {
         h('div', {
           staticClass: 'q-slider-track active-track',
           style: {
-            left: `${this.percentageMin * 100}%`,
+            [this.$q.i18n.rtl ? 'right' : 'left']: `${this.percentageMin * 100}%`,
             width: this.activeTrackWidth
           },
           'class': {

src/components/slider/QSlider.js

@@ -79,7 +79,7 @@ export default {
     },
     __update (event) {
       let
-        percentage = getPercentage(event, this.dragging),
+        percentage = getPercentage(event, this.dragging, this.$q.i18n.rtl),
         model = getModel(percentage, this.min, this.max, this.step, this.computedDecimals)
 
       this.currentPercentage = percentage
@@ -117,7 +117,7 @@ export default {
         h('div', {
           staticClass: 'q-slider-handle',
           style: {
-            left: this.percentage,
+            [this.$q.i18n.rtl ? 'right' : 'left']: this.percentage,
             borderRadius: this.square ? '0' : '50%'
           },
           'class': {

src/components/slider/slider-utils.js

@@ -2,8 +2,9 @@ import { between } from '../../utils/format'
 import { position } from '../../utils/event'
 import TouchPan from '../../directives/touch-pan'
 
-export function getPercentage (event, dragging) {
-  return between((position(event).left - dragging.left) / dragging.width, 0, 1)
+export function getPercentage (event, dragging, rtl) {
+  const val = between((position(event).left - dragging.left) / dragging.width, 0, 1)
+  return rtl ? 1.0 - val : val
 }
 
 export function notDivides (res, decimals) {