From bbf0b4d40206ad577c8fc196c747273b1c2a3114 Mon Sep 17 00:00:00 2001
From: Luke Pulverenti <luke.pulverenti@gmail.com>
Date: Tue, 4 Aug 2015 10:33:07 -0400
Subject: [PATCH] restore slider changes

---
 .../paper-slider/paper-slider.html            |   7 +-
 dashboard-ui/vulcanize-out.html               | 800 +++++++++---------
 2 files changed, 410 insertions(+), 397 deletions(-)

diff --git a/dashboard-ui/bower_components/paper-slider/paper-slider.html b/dashboard-ui/bower_components/paper-slider/paper-slider.html
index 363ec7e571..d619035807 100644
--- a/dashboard-ui/bower_components/paper-slider/paper-slider.html
+++ b/dashboard-ui/bower_components/paper-slider/paper-slider.html
@@ -103,7 +103,7 @@ Custom property | Description | Default
             class="circle"
             hidden$="[[!receivedFocusFromKeyboard]]">
           </paper-ripple>
-          <div id="sliderKnobInner" value$="[[immediateValue]]"></div>
+          <div id="sliderKnobInner" value$="[[pinValue]]"></div>
       </div>
     </div>
 
@@ -311,6 +311,7 @@ Custom property | Description | Default
 
     _positionKnob: function(ratio) {
       this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+      this._setPinValue(this.immediateValue);
       this._setRatio(this._calcRatio(this.immediateValue));
 
       this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
@@ -365,6 +366,7 @@ Custom property | Description | Default
       // update knob's position
       var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
       this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
+      this._setPinValue(immediateValue);
     },
 
     _trackEnd: function() {
@@ -477,6 +479,9 @@ Custom property | Description | Default
         this.decrement();
       }
       this.fire('change');
+    },
+    _setPinValue: function (value) {
+        this.pinValue = value;
     }
   });
 
diff --git a/dashboard-ui/vulcanize-out.html b/dashboard-ui/vulcanize-out.html
index 90c8c352c4..54c8f8297b 100644
--- a/dashboard-ui/vulcanize-out.html
+++ b/dashboard-ui/vulcanize-out.html
@@ -16782,7 +16782,7 @@ iron-selector:not(.narrow-layout) #main ::content [paper-drawer-toggle] {
 </script>
 <dom-module id="paper-slider" assetpath="bower_components/paper-slider/">
 
-    <style>
+  <style>
 /**
 @license
 Copyright (c) 2015 The Polymer Project Authors. All rights reserved.
@@ -16804,20 +16804,20 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
 }
 
-:host(:not([disabled])) #sliderBar::shadow #activeProgress {
-  background-color: var(--paper-slider-active-color, --google-blue-700);
+:host(:not([disabled])) #sliderBar {
+  --paper-progress-active-color: var(--paper-slider-active-color, --google-blue-700);
 }
 
-:host(:not([disabled])) #sliderBar::shadow #secondaryProgress {
-  background-color: var(--paper-slider-secondary-color, --google-blue-300);
+:host(:not([disabled])) #sliderBar {
+  --paper-progress-secondary-color: var(--paper-slider-secondary-color, --google-blue-300);
 }
 
-:host([disabled]) #sliderBar::shadow #activeProgress {
-  background-color: var(--paper-slider-disabled-active-color, --google-grey-500);
+:host([disabled]) #sliderBar {
+  --paper-progress-active-color: var(--paper-slider-disabled-active-color, --google-grey-500);
 }
 
-:host([disabled]) #sliderBar::shadow #secondaryProgress {
-  background-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
+:host([disabled]) #sliderBar {
+  --paper-progress-secondary-color: var(--paper-slider-disabled-secondary-color, --google-grey-300);
 }
 
 :host(:focus) {
@@ -16901,11 +16901,6 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   background-color: black;
 }
 
-.transiting #sliderBar::shadow #activeProgress {
-  -webkit-transition: -webkit-transform 0.08s ease;
-  transition: transform 0.08s ease;
-}
-
 #sliderKnob {
   @apply(--layout-center-justified);
   @apply(--layout-center);
@@ -16938,10 +16933,12 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 #sliderKnobInner {
   width: 12px;
   height: 12px;
-  box-sizing: border-box;
-  -moz-box-sizing: border-box;
   border-radius: 50%;
   background-color: var(--paper-slider-knob-color, --google-blue-700);
+
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+
   transition-property: height, width, background-color, border;
   transition-duration: 0.1s;
   transition-timing-function: ease;
@@ -16950,13 +16947,14 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 .expand:not(.pin) > #sliderKnob > #sliderKnobInner {
   width: 100%;
   height: 100%;
+
   -webkit-transform: translateZ(0);
   transform: translateZ(0);
 }
 
 .ring > #sliderKnob > #sliderKnobInner {
-  background-color: transparent;
-  border: 2px solid #c8c8c8;
+  background-color: var(--paper-slider-knob-start-color, transparent);
+  border: 2px solid var(--paper-slider-knob-start-border-color, #c8c8c8);
 }
 
 #sliderKnobInner::before {
@@ -16972,6 +16970,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   height: 26px;
   margin-left: 3px;
   border-radius: 50% 50% 50% 0;
+
   -webkit-transform: rotate(-45deg) scale(0) translate(0);
   transform: rotate(-45deg) scale(0) translate(0);
 }
@@ -16983,7 +16982,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
 }
 
 .pin.ring > #sliderKnob > #sliderKnobInner::before {
-  background-color: #c8c8c8;
+  background-color: var(--paper-slider-pin-start-color, #c8c8c8);
 }
 
 .pin.expand > #sliderKnob > #sliderKnobInner::before {
@@ -17001,6 +17000,7 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   text-align: center;
   color: var(--paper-slider-font-color, #fff);
   font-size: 10px;
+
   -webkit-transform: scale(0) translate(0);
   transform: scale(0) translate(0);
 }
@@ -17017,9 +17017,10 @@ subject to an additional IP rights grant found at http://polymer.github.io/PATEN
   overflow: hidden;
 }
 
-.slider-input::shadow input {
-  /* FIXME(ffu): should one be able set text-align directly on paper-input? */
-  text-align: center;
+.slider-input {
+  --paper-input-container-input: {
+      text-align: center;
+  };
 }
 
 /* disabled state */
@@ -17043,414 +17044,421 @@ paper-ripple {
 
 </style>
 
-    <template>
-        <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
+  <template>
+    <div id="sliderContainer" class$="[[_getClassNames(disabled, pin, snaps, immediateValue, min, expand, dragging, transiting, editable)]]">
 
-            <div class="bar-container">
-                <paper-progress id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
-                </paper-progress>
-            </div>
+      <div class="bar-container">
+        <paper-progress class$="[[_getProgressClass(transiting)]]" id="sliderBar" aria-hidden="true" min="[[min]]" max="[[max]]" step="[[step]]" value="[[immediateValue]]" secondary-progress="[[secondaryProgress]]" on-down="_bardown" on-up="_resetKnob" on-track="_onTrack">
+        </paper-progress>
+      </div>
 
-            <template is="dom-if" if="[[snaps]]">
-                <div class="slider-markers horizontal layout">
-                    <template is="dom-repeat" items="[[markers]]">
-                        <div class="slider-marker flex"></div>
-                    </template>
-                </div>
-            </template>
-
-            <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
-                <paper-ripple id="ink" class="circle" center="" hidden$="[[!receivedFocusFromKeyboard]]"></paper-ripple>
-                <div id="sliderKnobInner" value$="[[pinValue]]"></div>
-            </div>
+      <template is="dom-if" if="[[snaps]]">
+        <div class="slider-markers horizontal layout">
+          <template is="dom-repeat" items="[[markers]]">
+            <div class="slider-marker flex"></div>
+          </template>
         </div>
+      </template>
 
-        <template is="dom-if" if="[[editable]]">
-            <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange">
-            </paper-input>
-        </template>
+      <div id="sliderKnob" class="center-justified center horizontal layout" on-down="_knobdown" on-up="_resetKnob" on-track="_onTrack" on-transitionend="_knobTransitionEnd">
+          <paper-ripple center="" id="ink" class="circle" hidden$="[[!receivedFocusFromKeyboard]]">
+          </paper-ripple>
+          <div id="sliderKnobInner" value$="[[pinValue]]"></div>
+      </div>
+    </div>
+
+    <template is="dom-if" if="[[editable]]">
+      <paper-input id="input" class="slider-input" disabled$="[[disabled]]" on-change="_inputChange" value="[[_fixForInput(immediateValue)]]">
+      </paper-input>
     </template>
+  </template>
 
 </dom-module>
 
 <script>
 
-    Polymer({
-        is: 'paper-slider',
+  Polymer({
+    is: 'paper-slider',
 
-        behaviors: [
-          Polymer.IronA11yKeysBehavior,
-          Polymer.PaperInkyFocusBehavior,
-          Polymer.IronFormElementBehavior,
-          Polymer.IronRangeBehavior
-        ],
+    behaviors: [
+      Polymer.IronFormElementBehavior,
+      Polymer.PaperInkyFocusBehavior,
+      Polymer.IronRangeBehavior
+    ],
 
-        properties: {
+    properties: {
 
-            /**
-             * If true, the slider thumb snaps to tick marks evenly spaced based
-             * on the `step` property value.
-             */
-            snaps: {
-                type: Boolean,
-                value: false,
-                notify: true
-            },
+      /**
+       * If true, the slider thumb snaps to tick marks evenly spaced based
+       * on the `step` property value.
+       */
+      snaps: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
 
-            /**
-             * If true, a pin with numeric value label is shown when the slider thumb
-             * is pressed. Use for settings for which users need to know the exact
-             * value of the setting.
-             */
-            pin: {
-                type: Boolean,
-                value: false,
-                notify: true
-            },
+      /**
+       * If true, a pin with numeric value label is shown when the slider thumb
+       * is pressed. Use for settings for which users need to know the exact
+       * value of the setting.
+       */
+      pin: {
+        type: Boolean,
+        value: false,
+        notify: true
+      },
 
-            /**
-             * The number that represents the current secondary progress.
-             */
-            secondaryProgress: {
-                type: Number,
-                value: 0,
-                notify: true,
-                observer: '_secondaryProgressChanged'
-            },
+      /**
+       * The number that represents the current secondary progress.
+       */
+      secondaryProgress: {
+        type: Number,
+        value: 0,
+        notify: true,
+        observer: '_secondaryProgressChanged'
+      },
 
-            /**
-             * If true, an input is shown and user can use it to set the slider value.
-             */
-            editable: {
-                type: Boolean,
-                value: false
-            },
+      /**
+       * If true, an input is shown and user can use it to set the slider value.
+       */
+      editable: {
+        type: Boolean,
+        value: false
+      },
 
-            /**
-             * The immediate value of the slider.  This value is updated while the user
-             * is dragging the slider.
-             */
-            immediateValue: {
-                type: Number,
-                value: 0,
-                readOnly: true
-            },
+      /**
+       * The immediate value of the slider.  This value is updated while the user
+       * is dragging the slider.
+       */
+      immediateValue: {
+        type: Number,
+        value: 0,
+        readOnly: true
+      },
 
-            /**
-             * The maximum number of markers
-             */
-            maxMarkers: {
-                type: Number,
-                value: 0,
-                notify: true,
-                observer: '_maxMarkersChanged'
-            },
+      /**
+       * The maximum number of markers
+       */
+      maxMarkers: {
+        type: Number,
+        value: 0,
+        notify: true,
+        observer: '_maxMarkersChanged'
+      },
 
-            /**
-             * If true, the knob is expanded
-             */
-            expand: {
-                type: Boolean,
-                value: false,
-                readOnly: true
-            },
+      /**
+       * If true, the knob is expanded
+       */
+      expand: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
 
-            /**
-             * True when the user is dragging the slider.
-             */
-            dragging: {
-                type: Boolean,
-                value: false,
-                readOnly: true
-            },
+      /**
+       * True when the user is dragging the slider.
+       */
+      dragging: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
 
-            transiting: {
-                type: Boolean,
-                value: false,
-                readOnly: true
-            },
+      transiting: {
+        type: Boolean,
+        value: false,
+        readOnly: true
+      },
 
-            markers: {
-                type: Array,
-                readOnly: true,
-                value: []
-            },
-        },
+      markers: {
+        type: Array,
+        readOnly: true,
+        value: []
+      },
+    },
 
-        observers: [
-          '_updateKnob(value, min, max, snaps, step)',
-          '_minChanged(min)',
-          '_maxChanged(max)',
-          '_valueChanged(value)',
-          '_immediateValueChanged(immediateValue)'
-        ],
+    observers: [
+      '_updateKnob(value, min, max, snaps, step)',
+      '_minChanged(min)',
+      '_maxChanged(max)',
+      '_valueChanged(value)',
+      '_immediateValueChanged(immediateValue)'
+    ],
 
-        hostAttributes: {
-            role: 'slider',
-            tabindex: 0
-        },
+    hostAttributes: {
+      role: 'slider',
+      tabindex: 0
+    },
 
-        keyBindings: {
-            'left down pagedown home': '_decrementKey',
-            'right up pageup end': '_incrementKey'
-        },
+    keyBindings: {
+      'left down pagedown home': '_decrementKey',
+      'right up pageup end': '_incrementKey'
+    },
 
-        ready: function () {
-            // issue polymer/polymer#1305
-            this.async(function () {
-                this._updateKnob(this.value);
-                this._updateInputValue();
-            }, 1);
-        },
+    ready: function() {
+      // issue polymer/polymer#1305
 
-        /**
-         * Increases value by `step` but not above `max`.
-         * @method increment
-         */
-        increment: function () {
-            this.value = this._clampValue(this.value + this.step);
-        },
-
-        /**
-         * Decreases value by `step` but not below `min`.
-         * @method decrement
-         */
-        decrement: function () {
-            this.value = this._clampValue(this.value - this.step);
-        },
-
-        _updateKnob: function (value) {
-            this._positionKnob(this._calcRatio(value));
-        },
-
-        _minChanged: function () {
-            this.setAttribute('aria-valuemin', this.min);
-        },
-
-        _maxChanged: function () {
-            this.setAttribute('aria-valuemax', this.max);
-        },
-
-        _valueChanged: function () {
-            this.setAttribute('aria-valuenow', this.value);
-            this.fire('value-change');
-        },
-
-        _immediateValueChanged: function () {
-            if (this.dragging) {
-                this.fire('immediate-value-change');
-            } else {
-                this.value = this.immediateValue;
-            }
-            this._updateInputValue();
-        },
-
-        _secondaryProgressChanged: function () {
-            this.secondaryProgress = this._clampValue(this.secondaryProgress);
-        },
-
-        _updateInputValue: function () {
-            if (this.editable) {
-                this.$$('#input').value = this.immediateValue.toString();
-            }
-        },
-
-        _expandKnob: function () {
-            this._setExpand(true);
-        },
-
-        _resetKnob: function () {
-            this.cancelDebouncer('expandKnob');
-            this._setExpand(false);
-        },
-
-        _positionKnob: function (ratio) {
-            this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
-            this._setPinValue(this.immediateValue);
-
-            this._setRatio(this._calcRatio(this.immediateValue));
-
-            this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
-        },
-
-        _inputChange: function () {
-            this.value = this.$$('#input').value;
-            this.fire('change');
-        },
-
-        _calcKnobPosition: function (ratio) {
-            return (this.max - this.min) * ratio + this.min;
-        },
-
-        _onTrack: function (event) {
-            switch (event.detail.state) {
-                case 'start':
-                    this._trackStart(event);
-                    break;
-                case 'track':
-                    this._trackX(event);
-                    break;
-                case 'end':
-                    this._trackEnd();
-                    break;
-            }
-        },
-
-        _trackStart: function (event) {
-            this._w = this.$.sliderBar.offsetWidth;
-            this._x = this.ratio * this._w;
-            this._startx = this._x || 0;
-            this._minx = -this._startx;
-            this._maxx = this._w - this._startx;
-            this.$.sliderKnob.classList.add('dragging');
-
-            this._setDragging(true);
-        },
-
-        _trackX: function (e) {
-            if (!this.dragging) {
-                this._trackStart(e);
-            }
-
-            var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
-            this._x = this._startx + dx;
-
-            var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
-            this._setImmediateValue(immediateValue);
-            this._setPinValue(immediateValue);
-
-            // update knob's position
-            var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
-            this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
-        },
-
-        _trackEnd: function () {
-            var s = this.$.sliderKnob.style;
-
-            this.$.sliderKnob.classList.remove('dragging');
-            this._setDragging(false);
-            this._resetKnob();
-            this.value = this.immediateValue;
-
-            s.transform = s.webkitTransform = '';
-
-            this.fire('change');
-        },
-
-        _knobdown: function (event) {
-            this._expandKnob();
-
-            // cancel selection
-            event.detail.sourceEvent.preventDefault();
-
-            // set the focus manually because we will called prevent default
-            this.focus();
-        },
-
-        _bardown: function (event) {
-            this._w = this.$.sliderBar.offsetWidth;
-            var rect = this.$.sliderBar.getBoundingClientRect();
-            var ratio = (event.detail.x - rect.left) / this._w;
-            var prevRatio = this.ratio;
-
-            this._setTransiting(true);
-
-            this._positionKnob(ratio);
-
-            this.debounce('expandKnob', this._expandKnob, 60);
-
-            // if the ratio doesn't change, sliderKnob's animation won't start
-            // and `_knobTransitionEnd` won't be called
-            // Therefore, we need to manually update the `transiting` state
-
-            if (prevRatio === this.ratio) {
-                this._setTransiting(false);
-            }
-
-            this.async(function () {
-                this.fire('change');
-            });
-
-            // cancel selection
-            event.detail.sourceEvent.preventDefault();
-        },
-
-        _knobTransitionEnd: function (event) {
-            if (event.target === this.$.sliderKnob) {
-                this._setTransiting(false);
-            }
-        },
-
-        _maxMarkersChanged: function (maxMarkers) {
-            var l = (this.max - this.min) / this.step;
-            if (!this.snaps && l > maxMarkers) {
-                this._setMarkers([]);
-            } else {
-                this._setMarkers(new Array(l));
-            }
-        },
-
-        _getClassNames: function () {
-            var classes = {};
-
-            classes.disabled = this.disabled;
-            classes.pin = this.pin;
-            classes.snaps = this.snaps;
-            classes.ring = this.immediateValue <= this.min;
-            classes.expand = this.expand;
-            classes.dragging = this.dragging;
-            classes.transiting = this.transiting;
-            classes.editable = this.editable;
-
-            return Object.keys(classes).filter(
-              function (className) {
-                  return classes[className];
-              }).join(' ');
-        },
-
-        _incrementKey: function (event) {
-            if (event.detail.key === 'end') {
-                this.value = this.max;
-            } else {
-                this.increment();
-            }
-            this.fire('change');
-        },
-
-        _decrementKey: function (event) {
-            if (event.detail.key === 'home') {
-                this.value = this.min;
-            } else {
-                this.decrement();
-            }
-            this.fire('change');
-        },
-
-        _setPinValue: function (value) {
-            this.pinValue = value;
-        }
-    });
+      this.async(function() {
+        this._updateKnob(this.value);
+      }, 1);
+    },
 
     /**
-     * Fired when the slider's value changes.
-     *
-     * @event value-change
+     * Increases value by `step` but not above `max`.
+     * @method increment
      */
+    increment: function() {
+      this.value = this._clampValue(this.value + this.step);
+    },
 
     /**
-     * Fired when the slider's immediateValue changes.
-     *
-     * @event immediate-value-change
+     * Decreases value by `step` but not below `min`.
+     * @method decrement
      */
+    decrement: function() {
+      this.value = this._clampValue(this.value - this.step);
+    },
 
-    /**
-     * Fired when the slider's value changes due to user interaction.
-     *
-     * Changes to the slider's value due to changes in an underlying
-     * bound variable will not trigger this event.
-     *
-     * @event change
-     */
+    _updateKnob: function(value) {
+      this._positionKnob(this._calcRatio(value));
+    },
+
+    _minChanged: function() {
+      this.setAttribute('aria-valuemin', this.min);
+    },
+
+    _maxChanged: function() {
+      this.setAttribute('aria-valuemax', this.max);
+    },
+
+    _valueChanged: function() {
+      this.setAttribute('aria-valuenow', this.value);
+      this.fire('value-change');
+    },
+
+    _immediateValueChanged: function() {
+      if (this.dragging) {
+        this.fire('immediate-value-change');
+      } else {
+        this.value = this.immediateValue;
+      }
+    },
+
+    _secondaryProgressChanged: function() {
+      this.secondaryProgress = this._clampValue(this.secondaryProgress);
+    },
+
+    _fixForInput: function(immediateValue) {
+      // paper-input/issues/114
+      return this.immediateValue.toString();
+    },
+
+    _expandKnob: function() {
+      this._setExpand(true);
+    },
+
+    _resetKnob: function() {
+      this.cancelDebouncer('expandKnob');
+      this._setExpand(false);
+    },
+
+    _positionKnob: function(ratio) {
+      this._setImmediateValue(this._calcStep(this._calcKnobPosition(ratio)));
+      this._setPinValue(this.immediateValue);
+      this._setRatio(this._calcRatio(this.immediateValue));
+
+      this.$.sliderKnob.style.left = (this.ratio * 100) + '%';
+    },
+
+    _inputChange: function() {
+      this.value = this.$$('#input').value;
+      this.fire('change');
+    },
+
+    _calcKnobPosition: function(ratio) {
+      return (this.max - this.min) * ratio + this.min;
+    },
+
+    _onTrack: function(event) {
+      event.stopPropagation();
+      switch (event.detail.state) {
+        case 'start':
+          this._trackStart(event);
+          break;
+        case 'track':
+          this._trackX(event);
+          break;
+        case 'end':
+          this._trackEnd();
+          break;
+      }
+    },
+
+    _trackStart: function(event) {
+      this._w = this.$.sliderBar.offsetWidth;
+      this._x = this.ratio * this._w;
+      this._startx = this._x || 0;
+      this._minx = - this._startx;
+      this._maxx = this._w - this._startx;
+      this.$.sliderKnob.classList.add('dragging');
+
+      this._setDragging(true);
+    },
+
+    _trackX: function(e) {
+      if (!this.dragging) {
+        this._trackStart(e);
+      }
+
+      var dx = Math.min(this._maxx, Math.max(this._minx, e.detail.dx));
+      this._x = this._startx + dx;
+
+      var immediateValue = this._calcStep(this._calcKnobPosition(this._x / this._w));
+      this._setImmediateValue(immediateValue);
+
+      // update knob's position
+      var translateX = ((this._calcRatio(immediateValue) * this._w) - this._startx);
+      this.translate3d(translateX + 'px', 0, 0, this.$.sliderKnob);
+      this._setPinValue(immediateValue);
+    },
+
+    _trackEnd: function() {
+      var s = this.$.sliderKnob.style;
+
+      this.$.sliderKnob.classList.remove('dragging');
+      this._setDragging(false);
+      this._resetKnob();
+      this.value = this.immediateValue;
+
+      s.transform = s.webkitTransform = '';
+
+      this.fire('change');
+    },
+
+    _knobdown: function(event) {
+      this._expandKnob();
+
+      // cancel selection
+      event.preventDefault();
+
+      // set the focus manually because we will called prevent default
+      this.focus();
+    },
+
+    _bardown: function(event) {
+      this._w = this.$.sliderBar.offsetWidth;
+      var rect = this.$.sliderBar.getBoundingClientRect();
+      var ratio = (event.detail.x - rect.left) / this._w;
+      var prevRatio = this.ratio;
+
+      this._setTransiting(true);
+
+      this._positionKnob(ratio);
+
+      this.debounce('expandKnob', this._expandKnob, 60);
+
+      // if the ratio doesn't change, sliderKnob's animation won't start
+      // and `_knobTransitionEnd` won't be called
+      // Therefore, we need to manually update the `transiting` state
+
+      if (prevRatio === this.ratio) {
+        this._setTransiting(false);
+      }
+
+      this.async(function() {
+        this.fire('change');
+      });
+
+      // cancel selection
+      event.preventDefault();
+    },
+
+    _knobTransitionEnd: function(event) {
+      if (event.target === this.$.sliderKnob) {
+        this._setTransiting(false);
+      }
+    },
+
+    _maxMarkersChanged: function(maxMarkers) {
+      var l = (this.max - this.min) / this.step;
+      if (!this.snaps && l > maxMarkers) {
+        this._setMarkers([]);
+      } else {
+        this._setMarkers(new Array(l));
+      }
+    },
+
+    _mergeClasses: function(classes) {
+      return Object.keys(classes).filter(
+        function(className) {
+          return classes[className];
+        }).join(' ');
+    },
+
+    _getClassNames: function() {
+      var classes = {};
+
+      classes.disabled = this.disabled;
+      classes.pin = this.pin;
+      classes.snaps = this.snaps;
+      classes.ring = this.immediateValue <= this.min;
+      classes.expand = this.expand;
+      classes.dragging = this.dragging;
+      classes.transiting = this.transiting;
+      classes.editable = this.editable;
+
+      return this._mergeClasses(classes);
+    },
+
+    _getProgressClass: function() {
+      return this._mergeClasses({
+        transiting: this.transiting
+      });
+    },
+
+    _incrementKey: function(event) {
+      if (event.detail.key === 'end') {
+        this.value = this.max;
+      } else {
+        this.increment();
+      }
+      this.fire('change');
+    },
+
+    _decrementKey: function(event) {
+      if (event.detail.key === 'home') {
+        this.value = this.min;
+      } else {
+        this.decrement();
+      }
+      this.fire('change');
+    },
+    _setPinValue: function (value) {
+        this.pinValue = value;
+    }
+  });
+
+  /**
+   * Fired when the slider's value changes.
+   *
+   * @event value-change
+   */
+
+  /**
+   * Fired when the slider's immediateValue changes.
+   *
+   * @event immediate-value-change
+   */
+
+  /**
+   * Fired when the slider's value changes due to user interaction.
+   *
+   * Changes to the slider's value due to changes in an underlying
+   * bound variable will not trigger this event.
+   *
+   * @event change
+   */
 
 </script>
 <dom-module id="paper-menu" assetpath="bower_components/paper-menu/">