MD Settings: cr-slider: Make display consistent and clean up.

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

Index: ui/webui/resources/cr_elements/cr_slider/cr_slider.js
diff --git a/ui/webui/resources/cr_elements/cr_slider/cr_slider.js b/ui/webui/resources/cr_elements/cr_slider/cr_slider.js
index 32e5c5ff57b9eccd8104e470fce160c44986adb1..0d4d6107c3465c37d6ade85b4ac5e554d8acbf57 100644
--- a/ui/webui/resources/cr_elements/cr_slider/cr_slider.js
+++ b/ui/webui/resources/cr_elements/cr_slider/cr_slider.js
@@ -30,12 +30,9 @@ Polymer({
       reflectToAttribute: true,
     },
 
-    snaps: {
-      type: Boolean,
-      value: false,
-    },
+    labelMin: String,
 
-    maxMarkers: Number,
+    labelMax: String,
   },
 
   observers: [
@@ -47,8 +44,9 @@ Polymer({
    * after a user action.
    * @private
    */
-  onSliderChange_: function() {
-    this.value = this.tickValues[this.$.slider.immediateValue];
+  onSliderChanged_: function() {
+    if (this.tickValues && this.tickValues.length > 0)
+      this.value = this.tickValues[this.$.slider.immediateValue];
   },
 
   /**
@@ -58,9 +56,14 @@ Polymer({
    */
   valueChanged_: function() {
     // First update the slider settings if |tickValues| was set.
-    this.$.slider.max = this.tickValues.length - 1;
+    let numTicks = Math.max(1, this.tickValues.length);
+    this.$.slider.max = numTicks - 1;
+    // Limit the number of ticks to 10 to keep the slider from looking too busy.
+    /** @const */ var MAX_TICKS = 10;
+    this.$.slider.snaps = numTicks < MAX_TICKS;
+    this.$.slider.maxMarkers = numTicks < MAX_TICKS ? numTicks : 0;
 
-    if (this.$.slider.dragging &&
+    if (this.$.slider.dragging && this.tickValues.length > 0 &&
         this.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.
@@ -73,7 +76,8 @@ Polymer({
 
     // Convert from the public |value| to the slider index (where the knob
     // should be positioned on the slider).
-    var sliderIndex = this.tickValues.indexOf(this.value);
+    var sliderIndex =
+        this.tickValues.length > 0 ? this.tickValues.indexOf(this.value) : 0;
     if (sliderIndex == -1) {
       // No exact match.
       sliderIndex = this.findNearestIndex_(this.tickValues, this.value);