[MD settings] rtl sliders

chrome/browser/resources/settings/controls/settings_slider.js

Index: chrome/browser/resources/settings/controls/settings_slider.js
diff --git a/chrome/browser/resources/settings/controls/settings_slider.js b/chrome/browser/resources/settings/controls/settings_slider.js
index c6b9b59e007198601fa4935a3b07ec8cdf929234..9f7b34797fc107440706448ff0f786107926d08a 100644
--- a/chrome/browser/resources/settings/controls/settings_slider.js
+++ b/chrome/browser/resources/settings/controls/settings_slider.js
@@ -17,6 +17,13 @@ Polymer({
   behaviors: [CrPolicyPrefBehavior],
 
   properties: {
+    /** @type {?settings.DirectionDelegate} */
+    directionDelegate: {
+      observer: 'directionDelegateChanged_',
+      type: Object,
+      value: new settings.DirectionDelegateImpl(),
+    },
+
     /** @type {!chrome.settingsPrivate.PrefObject} */
     pref: Object,
 
@@ -52,9 +59,10 @@ Polymer({
   onSliderChanged_: function() {
     var newValue;
     if (this.tickValues && this.tickValues.length > 0)
-      newValue = this.tickValues[this.$.slider.immediateValue];
+      newValue =
+          this.tickValues[this.convertValue_(this.$.slider.immediateValue)];
     else
-      newValue = this.$.slider.immediateValue;
+      newValue = this.convertValue_(this.$.slider.immediateValue);
 
     this.set('pref.value', newValue);
   },
@@ -65,6 +73,18 @@ Polymer({
   },
 
   /**
+   * Convert to/from the slider value and the preference value.
+   * TODO(dschuyler): This is a workaround for paper-slider which doesn't
+   * currently handle RTL. It'd be better to convert at a lower level.
+   * @private
+   */
+  convertValue_: function(sliderValue) {
+    return (this.directionDelegate.isRtl() && this.tickValues) ?
+        this.tickValues.length - 1 - sliderValue :
+        sliderValue;
+  },
+
+  /**
    * Updates the knob position when |pref.value| changes. If the knob is still
    * being dragged, this instead forces |pref.value| back to the current
    * position.
@@ -73,7 +93,7 @@ Polymer({
   valueChanged_: function() {
     // If |tickValues| is empty, simply set current value to the slider.
     if (this.tickValues.length == 0) {
-      this.$.slider.value = this.pref.value;
+      this.$.slider.value = this.convertValue_(this.pref.value);
       return;
     }
 
@@ -91,7 +111,8 @@ Polymer({
       // knob, so set the value back to where the knob was.
       // Async so we don't confuse Polymer's data binding.
       this.async(function() {
-        var newValue = this.tickValues[this.$.slider.immediateValue];
+        var newValue =
+            this.tickValues[this.convertValue_(this.$.slider.immediateValue)];
         this.set('pref.value', newValue);
       });
       return;
@@ -108,7 +129,7 @@ Polymer({
           this.tickValues,
           /** @type {number} */ (this.pref.value));
     }
-    this.$.slider.value = sliderIndex;
+    this.$.slider.value = this.convertValue_(sliderIndex);
   },
 
   /**