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..679656f5d6e9c0fc8761758ab87e482d373b334f 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,12 @@ 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;
+    this.$.slider.snaps = numTicks < 10;

[dschuyler, 2016/12/22 22:09:45]

Please make a comment about 10 being an aesthetic design choice. (vs. being a
bug workaround or similar). Maybe something like one of these:

// The 10 ticks limit is an aesthetic choice.

// Avoid making the slider too busy looking by limiting the tick count.

// Limiting to 10 tick marks looks good.

[dschuyler, 2016/12/22 22:17:34]

Or maybe make a var like (which wouldn't need a comment imo because the name
tells me what's up):

var aestheticTickCountLimit = 10;

[stevenjb, 2016/12/23 00:18:38]

So many choices :) Going with a slightly konstant + comment.

+    this.$.slider.maxMarkers = numTicks < 10 ? 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 +74,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);