update components

dashboard-ui/bower_components/paper-slider/paper-slider.html

@@ -42,6 +42,7 @@ The following custom properties and mixins are available for styling:
 
 Custom property | Description | Default
 ----------------|-------------|----------
+`--paper-slider-container-color` | The background color of the bar | `--paper-grey-400`
 `--paper-slider-bar-color` | The background color of the slider | `transparent`
 `--paper-slider-active-color` | The progress bar color | `--google-blue-700`
 `--paper-slider-secondary-color` | The secondary progress bar color | `--google-blue-300`
@@ -131,7 +132,7 @@ Custom property | Description | Default
         padding: 15px 0;
         width: 100%;
         background-color: var(--paper-slider-bar-color, transparent);
-        --paper-progress-container-color: var(--paper-grey-400);
+        --paper-progress-container-color: var(--paper-slider-container-color, --paper-grey-400);
         --paper-progress-height: var(--paper-slider-height, 2px);
       }
 
@@ -301,7 +302,6 @@ Custom property | Description | Default
 
     <div id="sliderContainer"
       class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
-
       <div class="bar-container">
         <paper-progress
           disabled$="[[disabled]]"
@@ -331,7 +331,7 @@ Custom property | Description | Default
         on-up="_resetKnob"
         on-track="_onTrack"
         on-transitionend="_knobTransitionEnd">
-          <div id="sliderKnobInner" value$="[[pinValue]]"></div>
+          <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
       </div>
     </div>
 
@@ -420,8 +420,7 @@ Custom property | Description | Default
         maxMarkers: {
           type: Number,
           value: 0,
-          notify: true,
-          observer: '_maxMarkersChanged'
+          notify: true
         },
 
         /**
@@ -458,7 +457,8 @@ Custom property | Description | Default
       observers: [
         '_updateKnob(value, min, max, snaps, step)',
         '_valueChanged(value)',
-        '_immediateValueChanged(immediateValue)'
+        '_immediateValueChanged(immediateValue)',
+        '_updateMarkers(maxMarkers, min, max, snaps)'
       ],
 
       hostAttributes: {
@@ -471,13 +471,6 @@ Custom property | Description | Default
         'right up pageup end': '_incrementKey'
       },
 
-      ready: function() {
-        // issue polymer/polymer#1305
-        this.async(function() {
-          this._updateKnob(this.value);
-        }, 1);
-      },
-
       /**
        * Increases value by `step` but not above `max`.
        * @method increment
@@ -528,8 +521,7 @@ Custom property | Description | Default
       },
 
       _positionKnob: function(ratio) {
-          this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
-          this._setPinValue(this.immediateValue);
+        this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
         this._setRatio(this._calcRatio(this.immediateValue));
 
         this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
@@ -583,7 +575,6 @@ Custom property | Description | Default
         // update knob's position
         var translateX = ((this._calcRatio(this.immediateValue) * this._w) - this._knobstartx);
         this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
-        this._setPinValue(this.immediateValue);
       },
 
       _trackEnd: function() {
@@ -598,9 +589,6 @@ Custom property | Description | Default
 
         this.fire('change');
       },
-      _setPinValue: function (value) {
-          this.pinValue = value;
-      },
 
       _knobdown: function(event) {
         this._expandKnob();
@@ -649,11 +637,11 @@ Custom property | Description | Default
         }
       },
 
-      _maxMarkersChanged: function(maxMarkers) {
-        if (!this.snaps) {
+      _updateMarkers: function(maxMarkers, min, max, snaps) {
+        if (!snaps) {
           this._setMarkers([]);
         }
-        var steps = Math.round((this.max - this.min) / this.step);
+        var steps = Math.round((max - min) / this.step);
         if (steps > maxMarkers) {
           steps = maxMarkers;
         }
@@ -743,7 +731,12 @@ Custom property | Description | Default
      */
 
     /**
-     * Fired when the slider's immediateValue changes.
+     * Fired when the slider's immediateValue changes. Only occurs while the
+     * user is dragging.
+     *
+     * To detect changes to immediateValue that happen for any input (i.e.                                                          
+     * dragging, tapping, clicking, etc.) listen for immediate-value-changed
+     * instead.
      *
      * @event immediate-value-change
      */