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

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

 // Copyright 2016 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.
 
 /**
  * @fileoverview
  * cr-slider wraps a paper-slider. It maps the slider's values from a linear UI
  * range to a range of real values.  When |value| does not map exactly to a
  * tick mark, it interpolates to the nearest tick.
  *
@@ skipping 12 matching lines @@
 
     /** @type {!Array<number>} Values corresponding to each tick. */
     tickValues: Array,
 
     disabled: {
       type: Boolean,
       value: false,
       reflectToAttribute: true,
     },
 
-    snaps: {
-      type: Boolean,
-      value: false,
-    },
+    labelMin: String,
 
-    maxMarkers: Number,
+    labelMax: String,
   },
 
   observers: [
     'valueChanged_(value, tickValues.*)',
   ],
 
   /**
    * Sets the |value| property to the value corresponding to the knob position
    * 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];
   },
 
   /**
    * Updates the knob position when |value| changes. If the knob is still being
    * dragged, this instead forces |value| back to the current position.
    * @private
    */
   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.
       // Async so we don't confuse Polymer's data binding.
       this.async(function() {
         this.value = this.tickValues[this.$.slider.immediateValue];
       });
       return;
     }
 
     // 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);
     }
     this.$.slider.value = sliderIndex;
   },
 
   /**
    * Returns the index of the item in |arr| closest to |value|.
    * @param {!Array<number>} arr
    * @param {number} value
    * @return {number}
    * @private
    */
   findNearestIndex_: function(arr, value) {
     var closestIndex;
     var minDifference = Number.MAX_VALUE;
     for (var i = 0; i < arr.length; i++) {
       var difference = Math.abs(arr[i] - value);
       if (difference < minDifference) {
         closestIndex = i;
         minDifference = difference;
       }
     }
 
     assert(typeof closestIndex != 'undefined');
     return closestIndex;
   },
 });