[MD settings] show icon when slider controlled by something

This CL adds a controlled-by indicator when a slider is controlled by
policy or an extention.

BUG=693302
CQ_INCLUDE_TRYBOTS=master.tryserver.chromium.linux:closure_compilation

Review-Url: https://codereview.chromium.org/2737083002
Cr-Commit-Position: refs/heads/master@{#456247}

chrome/browser/resources/settings/a11y_page/manage_a11y_page.html

@@ -152,7 +152,7 @@
           <div>$i18n{largeMouseCursorSizeLabel}</div>
           <cr-slider
              disabled="[[!prefs.settings.a11y.large_cursor_enabled.value]]"
-             value="{{prefs.settings.a11y.large_cursor_dip_size.value}}"
+             pref="{{prefs.settings.a11y.large_cursor_dip_size}}"
              min="25" max="64"></cr-slider>
         </div>
       </template>

chrome/browser/resources/settings/appearance_page/appearance_fonts_page.html

@@ -14,7 +14,7 @@
     <div class="settings-box first">
       <div class="start">$i18n{fontSize}</div>
       <cr-slider id="sizeSlider"
-          value="{{prefs.webkit.webprefs.default_font_size.value}}"
+          pref="{{prefs.webkit.webprefs.default_font_size}}"
           tick-values="[[fontSizeRange_]]"
           label-min="$i18n{tiny}" label-max="$i18n{huge}">
       </cr-slider>
@@ -29,7 +29,7 @@
         : $i18n{quickBrownFox}
       </div>
       <cr-slider id="minimumSizeSlider"
-          value="{{prefs.webkit.webprefs.minimum_font_size.value}}"
+          pref="{{prefs.webkit.webprefs.minimum_font_size}}"
           tick-values="[[minimumFontSizeRange_]]"
           label-min="$i18n{tiny}" label-max="$i18n{huge}">
       </cr-slider>

chrome/browser/resources/settings/device_page/compiled_resources2.gyp

@@ -55,6 +55,7 @@
       'dependencies': [
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:cr',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:i18n_behavior',
+        '<(EXTERNS_GYP):settings_private',
         '<(EXTERNS_GYP):system_display',
         '<(INTERFACES_GYP):system_display_interface',
         'display_layout'

chrome/browser/resources/settings/device_page/display.html

@@ -114,7 +114,7 @@
           </div>
         </div>
         <cr-slider disabled="[[!enableSetResolution_(selectedDisplay)]]"
-            tick-values="[[modeValues_]]" value="{{selectedModeIndex_}}"
+            tick-values="[[modeValues_]]" pref="{{selectedModePref_}}"
             on-change="onSelectedModeChange_">
         </cr-slider>
       </div>

chrome/browser/resources/settings/device_page/display.js

@@ -23,6 +23,21 @@ Polymer({
   ],
 
   properties: {
+    /**
+     * @type {!chrome.settingsPrivate.PrefObject}
+     * @private
+     */
+    selectedModePref_: {
+      type: Object,
+      value: function() {
+        return {
+          key: 'fakeDisplaySliderPref',
+          type: chrome.settingsPrivate.PrefType.NUMBER,
+          value: 0,
+        };
+      },
+    },
+
     /**
      * Array of displays.
      * @type {!Array<!chrome.system.display.DisplayUnitInfo>}
@@ -55,9 +70,6 @@ Polymer({
 
     /** @private {!Array<number>} Mode index values for slider. */
     modeValues_: Array,
-
-    /** @private Selected mode index value for slider. */
-    selectedModeIndex_: Number,
   },
 
   /** @private {number} Selected mode index received from chrome. */
@@ -151,18 +163,20 @@ Polymer({
 
   /** @private */
   selectedDisplayChanged_: function() {
-    // Set |modeValues_| before |selectedModeIndex_| so that the slider updates
-    // correctly.
+    // Set |modeValues_| before |selectedModePref_.value| so that the slider
+    // updates correctly.
     var numModes = this.selectedDisplay.modes.length;
     if (numModes == 0) {
       this.modeValues_ = [];
-      this.selectedModeIndex_ = 0;
+      this.set('selectedModePref_.value', 0);
       this.currentSelectedModeIndex_ = 0;
       return;
     }
     this.modeValues_ = Array.from(Array(numModes).keys());
-    this.selectedModeIndex_ = this.getSelectedModeIndex_(this.selectedDisplay);
-    this.currentSelectedModeIndex_ = this.selectedModeIndex_;
+    this.set('selectedModePref_.value', this.getSelectedModeIndex_(
+        this.selectedDisplay));
+    this.currentSelectedModeIndex_ =
+        /** @type {number} */ (this.selectedModePref_.value);
   },
 
   /**
@@ -204,7 +218,7 @@ Polymer({
    * primary or extended.
    * @param {!chrome.system.display.DisplayUnitInfo} selectedDisplay
    * @param {string} primaryDisplayId
-   * @return {number} Retruns 0 if the display is primary else returns 1.
+   * @return {number} Returns 0 if the display is primary else returns 1.
    * @private
    */
   getDisplaySelectMenuIndex_: function(selectedDisplay, primaryDisplayId) {
@@ -269,12 +283,13 @@ Polymer({
     if (this.selectedDisplay.modes.length == 0 ||
         this.currentSelectedModeIndex_ == -1) {
       // If currentSelectedModeIndex_ == -1, selectedDisplay and
-      // selectedModeIndex_ are not in sync.
+      // |selectedModePref_.value| are not in sync.
       return this.i18n(
           'displayResolutionText', this.selectedDisplay.bounds.width.toString(),
           this.selectedDisplay.bounds.height.toString());
     }
-    var mode = this.selectedDisplay.modes[this.selectedModeIndex_];
+    var mode = this.selectedDisplay.modes[
+        /** @type {number} */(this.selectedModePref_.value)];
     var best =
         this.selectedDisplay.isInternal ? mode.uiScale == 1.0 : mode.isNative;
     var widthStr = mode.width.toString();
@@ -298,8 +313,8 @@ Polymer({
         continue;
       if (this.selectedDisplay != display) {
         // Set currentSelectedModeIndex_ to -1 so that getResolutionText_ does
-        // not flicker. selectedDisplayChanged will update selectedModeIndex_
-        // and currentSelectedModeIndex_ correctly.
+        // not flicker. selectedDisplayChanged will update
+        // |selectedModePref_.value| and currentSelectedModeIndex_ correctly.
         this.currentSelectedModeIndex_ = -1;
         this.selectedDisplay = display;
       }
@@ -355,13 +370,14 @@ Polymer({
    */
   onSelectedModeChange_: function() {
     if (this.currentSelectedModeIndex_ == -1 ||
-        this.currentSelectedModeIndex_ == this.selectedModeIndex_) {
+        this.currentSelectedModeIndex_ == this.selectedModePref_.value) {
       // Don't change the selected display mode until we have received an update
       // from Chrome and the mode differs from the current mode.
       return;
     }
     /** @type {!chrome.system.display.DisplayProperties} */ var properties = {
-      displayMode: this.selectedDisplay.modes[this.selectedModeIndex_]
+      displayMode: this.selectedDisplay.modes[
+          /** @type {number} */(this.selectedModePref_.value)]
     };
     settings.display.systemDisplayApi.setDisplayProperties(
         this.selectedDisplay.id, properties,

chrome/browser/resources/settings/device_page/keyboard.html

@@ -83,7 +83,7 @@
       <div class="settings-box continuation settings-checkbox-spacer">
         <div class="start" id="repeatDelayLabel">$i18n{keyRepeatDelay}</div>
         <cr-slider id="delaySlider"
-            value="{{prefs.settings.language.xkb_auto_repeat_delay_r2.value}}"
+            pref="{{prefs.settings.language.xkb_auto_repeat_delay_r2}}"
             tick-values="[[autoRepeatDelays_]]"
             disabled="[[
                 !prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"
@@ -95,8 +95,8 @@
       <div class="settings-box continuation settings-checkbox-spacer">
         <div class="start" id="repeatRateLabel">$i18n{keyRepeatRate}</div>
         <cr-slider id="repeatRateSlider"
-            value="{{
-                prefs.settings.language.xkb_auto_repeat_interval_r2.value}}"
+            pref="{{
+                prefs.settings.language.xkb_auto_repeat_interval_r2}}"
             tick-values="[[autoRepeatIntervals_]]"
             disabled="[[
                 !prefs.settings.language.xkb_auto_repeat_enabled_r2.value]]"

chrome/browser/resources/settings/device_page/pointers.html

@@ -36,7 +36,7 @@
       </div>
       <div class="settings-box">
         <div class="start" id="mouseSpeedLabel">$i18n{mouseSpeed}</div>
-        <cr-slider value="{{prefs.settings.mouse.sensitivity2.value}}"
+        <cr-slider pref="{{prefs.settings.mouse.sensitivity2}}"
             tick-values="[[sensitivityValues_]]"
             aria-labelledby="mouseSpeedLabel"
             label-min="$i18n{pointerSlow}"
@@ -61,7 +61,7 @@
       <div class="settings-box">
         <div class="start" id="touchpadSpeedLabel">$i18n{touchpadSpeed}</div>
           <cr-slider id="touchpadSensitivity"
-              value="{{prefs.settings.touchpad.sensitivity2.value}}"
+              pref="{{prefs.settings.touchpad.sensitivity2}}"
               tick-values="[[sensitivityValues_]]"
               aria-labelledby="touchpadSpeedLabel"
               label-min="$i18n{pointerSlow}"

chrome/test/data/webui/cr_elements/cr_elements_browsertest.js

@@ -127,6 +127,7 @@ CrElementsSliderTest.prototype = {
 
   /** @override */
   extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
+    'settings_private_test_constants.js',
     'cr_slider_tests.js',
   ]),
 };
@@ -218,6 +219,7 @@ CrElementsPolicyPrefIndicatorTest.prototype = {
 
   /** @override */
   extraLibraries: CrElementsBrowserTest.prototype.extraLibraries.concat([
+    'settings_private_test_constants.js',
     'cr_policy_strings.js',
     'cr_policy_pref_indicator_tests.js',
   ]),

chrome/test/data/webui/cr_elements/cr_policy_pref_indicator_tests.js

@@ -10,38 +10,6 @@ suite('CrPolicyPrefIndicator', function() {
   /** @type {!PaperTooltipElement|undefined} */
   var tooltip;
 
-  suiteSetup(function() {
-    // Define chrome.settingsPrivate enums, normally provided by chrome WebUI.
-    // NOTE: These need to be kept in sync with settings_private.idl.
-
-    chrome.settingsPrivate = chrome.settingsPrivate || {};
-
-    /** @enum {string} */
-    chrome.settingsPrivate.ControlledBy = {
-      DEVICE_POLICY: 'DEVICE_POLICY',
-      USER_POLICY: 'USER_POLICY',
-      OWNER: 'OWNER',
-      PRIMARY_USER: 'PRIMARY_USER',
-      EXTENSION: 'EXTENSION',
-    };
-
-    /** @enum {string} */
-    chrome.settingsPrivate.Enforcement = {
-      ENFORCED: 'ENFORCED',
-      RECOMMENDED: 'RECOMMENDED',
-    };
-
-    /** @enum {string} */
-    chrome.settingsPrivate.PrefType = {
-      BOOLEAN: 'BOOLEAN',
-      NUMBER: 'NUMBER',
-      STRING: 'STRING',
-      URL: 'URL',
-      LIST: 'LIST',
-      DICTIONARY: 'DICTIONARY',
-    };
-  });
-
   setup(function() {
     PolymerTest.clearBody();
 

chrome/test/data/webui/cr_elements/cr_slider_tests.js

@@ -20,55 +20,75 @@ cr.define('cr_slider', function() {
       setup(function() {
         PolymerTest.clearBody();
         slider = document.createElement('cr-slider');
+        slider.pref = {
+          type: chrome.settingsPrivate.PrefType.NUMBER,
+          value: 16,
+        };
         document.body.appendChild(slider);
         paperSlider = slider.$$('paper-slider');
       });
 
+      test('enforce value', function() {
+        // Test that the indicator is not present until after the pref is
+        // enforced.
+        indicator = slider.$$('cr-policy-pref-indicator');
+        assertFalse(!!indicator);
+        slider.pref = {
+          controlledBy: chrome.settingsPrivate.ControlledBy.DEVICE_POLICY,
+          enforcement: chrome.settingsPrivate.Enforcement.ENFORCED,
+          type: chrome.settingsPrivate.PrefType.NUMBER,
+          value: 16,
+        };
+        Polymer.dom.flush();
+        indicator = slider.$$('cr-policy-pref-indicator');
+        assertTrue(!!indicator);
+      });
+
       test('set value', function() {
         slider.tickValues = tickValues;
-        slider.value = 16;
+        slider.set('pref.value', 16);
         expectEquals(6, paperSlider.max);
         expectEquals(3, paperSlider.value);
         expectEquals(3, paperSlider.immediateValue);
 
         // cr-slider only supports snapping to a range of tick values. Setting
         // to an in-between value should snap to an indexed value.
-        slider.value = 70;
+        slider.set('pref.value', 70);
         expectEquals(5, paperSlider.value);
         expectEquals(5, paperSlider.immediateValue);
-        expectEquals(64, slider.value);
+        expectEquals(64, slider.pref.value);
 
         // Setting the value out-of-range should clamp the slider.
-        slider.value = -100;
+        slider.set('pref.value', -100);
         expectEquals(0, paperSlider.value);
         expectEquals(0, paperSlider.immediateValue);
-        expectEquals(2, slider.value);
+        expectEquals(2, slider.pref.value);
       });
 
       test('move slider', function() {
         slider.tickValues = tickValues;
-        slider.value = 30;
+        slider.set('pref.value', 30);
         expectEquals(4, paperSlider.value);
 
         MockInteractions.pressAndReleaseKeyOn(
             paperSlider, 39 /* right */);
         expectEquals(5, paperSlider.value);
-        expectEquals(64, slider.value);
+        expectEquals(64, slider.pref.value);
 
         MockInteractions.pressAndReleaseKeyOn(
             paperSlider, 39 /* right */);
         expectEquals(6, paperSlider.value);
-        expectEquals(128, slider.value);
+        expectEquals(128, slider.pref.value);
 
         MockInteractions.pressAndReleaseKeyOn(
             paperSlider, 39 /* right */);
         expectEquals(6, paperSlider.value);
-        expectEquals(128, slider.value);
+        expectEquals(128, slider.pref.value);
 
         MockInteractions.pressAndReleaseKeyOn(
             paperSlider, 37 /* left */);
         expectEquals(5, paperSlider.value);
-        expectEquals(64, slider.value);
+        expectEquals(64, slider.pref.value);
       });
 
       test('findNearestIndex_', function() {

chrome/test/data/webui/cr_elements/settings_private_test_constants.js

+// Copyright 2017 The Chromium Authors. All rights reserved.
+// Use of this source code is governed by a BSD-style license that can be
+// found in the LICENSE file.
+
+// Define chrome.settingsPrivate enums, normally provided by chrome WebUI.
+// NOTE: These need to be kept in sync with settings_private.idl.
+
+chrome.settingsPrivate = chrome.settingsPrivate || {};
+
+/** @enum {string} */
+chrome.settingsPrivate.ControlledBy = {
+  DEVICE_POLICY: 'DEVICE_POLICY',
+  USER_POLICY: 'USER_POLICY',
+  OWNER: 'OWNER',
+  PRIMARY_USER: 'PRIMARY_USER',
+  EXTENSION: 'EXTENSION',
+};
+
+/** @enum {string} */
+chrome.settingsPrivate.Enforcement = {
+  ENFORCED: 'ENFORCED',
+  RECOMMENDED: 'RECOMMENDED',
+};
+
+/** @enum {string} */
+chrome.settingsPrivate.PrefType = {
+  BOOLEAN: 'BOOLEAN',
+  NUMBER: 'NUMBER',
+  STRING: 'STRING',
+  URL: 'URL',
+  LIST: 'LIST',
+  DICTIONARY: 'DICTIONARY',
+};

chrome/test/data/webui/settings/device_page_tests.js

@@ -314,12 +314,12 @@ cr.define('device_page_tests', function() {
         expectFalse(pointersPage.$$('#mouse settings-toggle-button').checked);
 
         var slider = assert(pointersPage.$$('#mouse cr-slider'));
-        expectEquals(4, slider.value);
+        expectEquals(4, slider.pref.value);
         MockInteractions.pressAndReleaseKeyOn(slider.$.slider, 37 /* left */);
         expectEquals(3, devicePage.prefs.settings.mouse.sensitivity2.value);
 
         pointersPage.set('prefs.settings.mouse.sensitivity2.value', 5);
-        expectEquals(5, slider.value);
+        expectEquals(5, slider.pref.value);
       });
 
       test('touchpad', function() {
@@ -329,13 +329,12 @@ cr.define('device_page_tests', function() {
         expectFalse(pointersPage.$$('#touchpad #enableTapDragging').checked);
 
         var slider = assert(pointersPage.$$('#touchpad cr-slider'));
-        expectEquals(3, slider.value);
-        MockInteractions.pressAndReleaseKeyOn(
-            slider.$.slider, 39 /* right */);
+        expectEquals(3, slider.pref.value);
+        MockInteractions.pressAndReleaseKeyOn(slider.$.slider, 39 /* right */);
         expectEquals(4, devicePage.prefs.settings.touchpad.sensitivity2.value);
 
         pointersPage.set('prefs.settings.touchpad.sensitivity2.value', 2);
-        expectEquals(2, slider.value);
+        expectEquals(2, slider.pref.value);
       });
 
       test('link doesn\'t activate control', function(done) {
@@ -401,37 +400,34 @@ cr.define('device_page_tests', function() {
         assertTrue(!!collapse);
         expectTrue(collapse.opened);
 
-        expectEquals(500, keyboardPage.$.delaySlider.value);
-        expectEquals(500, keyboardPage.$.repeatRateSlider.value);
+        expectEquals(500, keyboardPage.$.delaySlider.pref.value);
+        expectEquals(500, keyboardPage.$.repeatRateSlider.pref.value);
 
         // Test interaction with the cr-slider's underlying paper-slider.
         MockInteractions.pressAndReleaseKeyOn(
             keyboardPage.$.delaySlider.$.slider, 37 /* left */);
         MockInteractions.pressAndReleaseKeyOn(
             keyboardPage.$.repeatRateSlider.$.slider, 39 /* right */);
-        expectEquals(1000,
-            devicePage.prefs.settings.language.xkb_auto_repeat_delay_r2.value);
-        expectEquals(
-            300,
-            devicePage.prefs.settings.language.xkb_auto_repeat_interval_r2.value
-        );
+        var language = devicePage.prefs.settings.language;
+        expectEquals(1000, language.xkb_auto_repeat_delay_r2.value);
+        expectEquals(300, language.xkb_auto_repeat_interval_r2.value);
 
         // Test sliders change when prefs change.
         devicePage.set(
             'prefs.settings.language.xkb_auto_repeat_delay_r2.value', 1500);
-        expectEquals(1500, keyboardPage.$.delaySlider.value);
+        expectEquals(1500, keyboardPage.$.delaySlider.pref.value);
         devicePage.set(
             'prefs.settings.language.xkb_auto_repeat_interval_r2.value',
             2000);
-        expectEquals(2000, keyboardPage.$.repeatRateSlider.value);
+        expectEquals(2000, keyboardPage.$.repeatRateSlider.pref.value);
 
         // Test sliders round to nearest value when prefs change.
         devicePage.set(
             'prefs.settings.language.xkb_auto_repeat_delay_r2.value', 600);
-        expectEquals(500, keyboardPage.$.delaySlider.value);
+        expectEquals(500, keyboardPage.$.delaySlider.pref.value);
         devicePage.set(
             'prefs.settings.language.xkb_auto_repeat_interval_r2.value', 45);
-        expectEquals(50, keyboardPage.$.repeatRateSlider.value);
+        expectEquals(50, keyboardPage.$.repeatRateSlider.pref.value);
 
         devicePage.set(
             'prefs.settings.language.xkb_auto_repeat_enabled_r2.value',

ui/webui/resources/cr_elements/cr_slider/compiled_resources2.gyp

@@ -6,6 +6,7 @@
     {
       'target_name': 'cr_slider',
       'dependencies': [
+        '<(DEPTH)/ui/webui/resources/cr_elements/policy/compiled_resources2.gyp:cr_policy_pref_behavior',
         '<(DEPTH)/ui/webui/resources/js/compiled_resources2.gyp:assert',
         '<(DEPTH)/third_party/polymer/v1_0/components-chromium/paper-slider/compiled_resources2.gyp:paper-slider-extracted',
       ],

ui/webui/resources/cr_elements/cr_slider/cr_slider.html

-<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/html/polymer.html">
+<link rel="import" href="chrome://resources/cr_elements/policy/cr_policy_pref_behavior.html">
+<link rel="import" href="chrome://resources/html/assert.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 
 <dom-module id="cr-slider">
   <template>
     <style>
+      :host {
+        display: inline-flex;
+      }
+
+      cr-policy-pref-indicator {
+        -webkit-margin-start: var(--checkbox-spacing);
+        align-self: center;
+      }
+
+      #labels[disabled] {
+        color: var(--paper-grey-400);
+      }
+
       div.outer {
         align-items: stretch;
         display: flex;
@@ -41,12 +55,16 @@
         width: 100%;
       }
     </style>
+    <template is="dom-if" if="[[pref.controlledBy]]" restamp>
+      <cr-policy-pref-indicator pref="[[pref]]"></cr-policy-pref-indicator>
+    </template>
     <div class="outer">
-      <paper-slider id="slider" disabled="[[disabled]]" snaps
+      <paper-slider id="slider"
+          disabled$="[[disableSlider_]]" snaps
           on-immediate-value-changed="onSliderChanged_" max="[[max]]"
           min="[[min]]">
       </paper-slider>
-      <div id="labels">
+      <div id="labels" disabled$="[[disableSlider_]]">
         <div id="label-begin">[[labelMin]]</div>
         <div id="label-end">[[labelMax]]</div>
       </div>

ui/webui/resources/cr_elements/cr_slider/cr_slider.js

@@ -14,22 +14,15 @@
 Polymer({
   is: 'cr-slider',
 
+  behaviors: [CrPolicyPrefBehavior],
+
   properties: {
-    /** The value the slider represents and controls. */
-    value: {
-      type: Number,
-      notify: true,
-    },
+    /** @type {!chrome.settingsPrivate.PrefObject} */
+    pref: Object,
 
     /** @type {!Array<number>} Values corresponding to each tick. */
     tickValues: {type: Array, value: []},
 
-    disabled: {
-      type: Boolean,
-      value: false,
-      reflectToAttribute: true,
-    },
-
     min: Number,
 
     max: Number,
@@ -37,33 +30,48 @@ Polymer({
     labelMin: String,
 
     labelMax: String,
+
+    /** @private */
+    disableSlider_: {
+      computed: 'computeDisableSlider_(pref.*)',
+      type: Boolean,
+    },
   },
 
   observers: [
-    'valueChanged_(value, tickValues.*)',
+    'valueChanged_(pref.*, tickValues.*)',
   ],
 
   /**
-   * Sets the |value| property to the value corresponding to the knob position
-   * after a user action.
+   * Sets the |pref.value| property to the value corresponding to the knob
+   * position after a user action.
    * @private
    */
   onSliderChanged_: function() {
+    var newValue;
     if (this.tickValues && this.tickValues.length > 0)
-      this.value = this.tickValues[this.$.slider.immediateValue];
+      newValue = this.tickValues[this.$.slider.immediateValue];
     else
-      this.value = this.$.slider.immediateValue;
+      newValue = this.$.slider.immediateValue;
+
+    this.set('pref.value', newValue);
+  },
+
+  /** @private */
+  computeDisableSlider_: function() {
+    return this.hasAttribute('disabled') || this.isPrefEnforced();
   },
 
   /**
-   * Updates the knob position when |value| changes. If the knob is still being
-   * dragged, this instead forces |value| back to the current position.
+   * 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.
    * @private
    */
   valueChanged_: function() {
     // If |tickValues| is empty, simply set current value to the slider.
     if (this.tickValues.length == 0) {
-      this.$.slider.value = this.value;
+      this.$.slider.value = this.pref.value;
       return;
     }
 
@@ -76,23 +84,27 @@ Polymer({
     this.$.slider.maxMarkers = numTicks < MAX_TICKS ? numTicks : 0;
 
     if (this.$.slider.dragging && this.tickValues.length > 0 &&
-        this.value != this.tickValues[this.$.slider.immediateValue]) {
+        this.pref.value != this.tickValues[this.$.slider.immediateValue]) {
       // The value changed outside cr-slider but we're still holding the knob,
       // so set the value back to where the knob was.
       // Async so we don't confuse Polymer's data binding.
       this.async(function() {
-        this.value = this.tickValues[this.$.slider.immediateValue];
+        var newValue = this.tickValues[this.$.slider.immediateValue];
+        this.set('pref.value', newValue);
       });
       return;
     }
 
     // Convert from the public |value| to the slider index (where the knob
     // should be positioned on the slider).
-    var sliderIndex =
-        this.tickValues.length > 0 ? this.tickValues.indexOf(this.value) : 0;
+    var sliderIndex = this.tickValues.length > 0 ?
+        this.tickValues.indexOf(/** @type {number} */ (this.pref.value)) :
+        0;
     if (sliderIndex == -1) {
       // No exact match.
-      sliderIndex = this.findNearestIndex_(this.tickValues, this.value);
+      sliderIndex = this.findNearestIndex_(
+          this.tickValues,
+          /** @type {number} */ (this.pref.value));
     }
     this.$.slider.value = sliderIndex;
   },