From 31e5726ab4443fc3355e80ffe934ca0ef541d0ce Mon Sep 17 00:00:00 2001
From: Kelly Fox <kfox@users.noreply.github.com>
Date: Tue, 2 Aug 2016 21:36:06 -0500
Subject: [PATCH] add marker icons and labels

---
 demo/index.html   | 176 ++++++++++++++++++++-
 paper-slider.html | 389 ++++++++++++++++++++++++++++++++++++++++++++--
 test/basic.html   | 223 +++++++++++++++++++++++++-
 3 files changed, 763 insertions(+), 25 deletions(-)

diff --git a/demo/index.html b/demo/index.html
index 3910a8a..405309b 100644
--- a/demo/index.html
+++ b/demo/index.html
@@ -19,6 +19,8 @@
   <script src="../../webcomponentsjs/webcomponents-lite.js"></script>
   <link rel="import" href="../../iron-demo-helpers/demo-snippet.html">
   <link rel="import" href="../../iron-demo-helpers/demo-pages-shared-styles.html">
+  <link rel="import" href="../../iron-icons/image-icons.html">
+  <link rel="import" href="../../iron-icons/device-icons.html">
   <link rel="import" href="../../paper-styles/color.html">
   <link rel="import" href="../paper-slider.html">
 
@@ -86,18 +88,173 @@ <h3>The pins can be labelled</h3>
         <div>Grade: <span id="gradeLabel" class="caption"></span></div><br>
         <paper-slider id="grade" pin value="20" secondary-progress="70"></paper-slider>
 
+      </template>
+    </demo-snippet>
+
+    <h3>Markers may have labels or icons</h3>
+    <demo-snippet>
+      <template>
+        <style is="custom-style">
+          #markers-one, #markers-two, #markers-three {
+            padding-bottom: 30px;
+          }
+        </style>
+        <h4>
+          Labels and Icons
+        </h4>
+
+        <paper-slider
+          id="markers-one"
+          snaps
+          max="10"
+          max-markers="10"
+          step="1"
+          value="5">
+        </paper-slider>
+
+        <h4>
+          Icons only
+        </h4>
+
+        <paper-slider
+          id="markers-two"
+          snaps
+          max="8"
+          max-markers="8"
+          step="1"
+          value="6">
+        </paper-slider>
+
+        <h4>
+          Labels only
+        </h4>
+
+        <paper-slider
+          id="markers-three"
+          snaps
+          max="2"
+          max-markers="2"
+          step="1"
+          value="2">
+        </paper-slider>
+
         <script>
           document.addEventListener('WebComponentsReady', function() {
-            var ratings = document.querySelector('#ratings');
-            ratings.addEventListener('value-change', function() {
-              document.querySelector('#ratingsLabel').textContent = ratings.value;
+            var markersOne = document.querySelector('#markers-one');
+            markersOne.markers = [
+              { 'label': 'tiny' },
+              {},
+              { 'icon': 'image:photo-size-select-small' },
+              {},
+              {},
+              { 'icon': 'image:photo-size-select-large' },
+              {},
+              {},
+              { 'icon': 'image:photo-size-select-actual' },
+              {},
+              { 'label': 'huge'}
+            ];
+
+            var markersTwo = document.querySelector('#markers-two');
+            markersTwo.markers = [
+              { 'icon': 'device:signal-cellular-0-bar' },
+              {},
+              { 'icon': 'device:signal-cellular-1-bar' },
+              {},
+              { 'icon': 'device:signal-cellular-2-bar' },
+              {},
+              { 'icon': 'device:signal-cellular-3-bar' },
+              {},
+              { 'icon': 'device:signal-cellular-4-bar' },
+            ];
+
+            var markersThree = document.querySelector('#markers-three');
+            markersThree.markers = [
+              { 'label': 'good' },
+              { 'label': 'better' },
+              { 'label': 'best' },
+            ];
             });
+        </script>
+      </template>
+    </demo-snippet>
+
+    <h3>Marker ticks can be displayed without a label or icon</h3>
+    <demo-snippet>
+      <template>
+        <style is="custom-style">
+          #markers-four {
+            padding-bottom: 30px;
+          }
+        </style>
 
-            var grade = document.querySelector('#grade');
-            grade.addEventListener('value-change', function() {
-              var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
-              document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
+        <paper-slider
+          id="markers-four"
+          snaps
+          show-plain-markers
+          max="10"
+          max-markers="10"
+          step="1"
+          value="5">
+        </paper-slider>
+
+        <script>
+          document.addEventListener('WebComponentsReady', function() {
+            var markersFour = document.querySelector('#markers-four');
+            markersFour.markers = [
+              { 'label': 'tiny' },
+              {},
+              { 'icon': 'image:photo-size-select-small' },
+              {},
+              {},
+              { 'icon': 'image:photo-size-select-large' },
+              {},
+              {},
+              { 'icon': 'image:photo-size-select-actual' },
+              {},
+              { 'label': 'huge'}
+            ];
             });
+        </script>
+      </template>
+    </demo-snippet>
+
+    <h3>Markers can be specified as waypoints</h3>
+    <demo-snippet>
+      <template>
+        <style is="custom-style">
+          #width {
+            padding-bottom: 30px;
+            --paper-slider-marker-icon-color: green;
+            --paper-slider-marker-label-color: red;
+          }
+        </style>
+
+        <div>Width: <span id="widthLabel" class="caption"></span></div><br />
+
+        <paper-slider
+          id="width"
+          pin
+          snaps
+          min="240"
+          max="1920"
+          step="8"
+          enable-highlight
+          value="640">
+        </paper-slider>
+
+        <script>
+          document.addEventListener('WebComponentsReady', function() {
+            var width = document.querySelector('#width');
+            width.waypoints = {
+              '240': { 'label': 'tiny' },
+              '480': { 'icon': 'image:photo-size-select-small' },
+              '640': { 'icon': 'image:photo-size-select-large' },
+              '960': { 'label': 'native', 'orientation': 'top' },
+              '1280': { 'icon': 'image:photo-size-select-actual' },
+              '1440': { 'icon': 'icons:favorite', 'orientation': 'top' },
+              '1920': { 'label': 'huge' },
+            };
           });
         </script>
       </template>
@@ -116,6 +273,11 @@ <h3>The pins can be labelled</h3>
         var label = (grade.value < grade.secondaryProgress) ? "Fail" : "Pass" ;
         document.querySelector('#gradeLabel').textContent = grade.value + " (" + label + ")";
       });
+
+      var width = document.querySelector('#width');
+      width.addEventListener('value-change', function() {
+        document.querySelector('#widthLabel').textContent = width.value + 'px';
+      });
     });
   </script>
 </body>
diff --git a/paper-slider.html b/paper-slider.html
index d9437c6..e512895 100644
--- a/paper-slider.html
+++ b/paper-slider.html
@@ -12,6 +12,7 @@
 <link rel="import" href="../iron-a11y-keys-behavior/iron-a11y-keys-behavior.html">
 <link rel="import" href="../iron-flex-layout/iron-flex-layout.html">
 <link rel="import" href="../iron-form-element-behavior/iron-form-element-behavior.html">
+<link rel="import" href="../iron-icon/iron-icon.html">
 <link rel="import" href="../iron-range-behavior/iron-range-behavior.html">
 <link rel="import" href="../paper-behaviors/paper-inky-focus-behavior.html">
 <link rel="import" href="../paper-input/paper-input.html">
@@ -57,6 +58,14 @@
 `--paper-slider-pin-start-color` | The color of the pin at the far left | `--paper-grey-400`
 `--paper-slider-height` | Height of the progress bar | `2px`
 `--paper-slider-input` | Mixin applied to the input in editable mode | `{}`
+`--paper-slider-marker-color` | The color of the markers | `--paper-grey-800`
+`--paper-slider-marker-label-color` | The color of the marker labels | `black`
+`--paper-slider-marker-icon-color` | The color of the marker icons | `black`
+`--paper-slider-marker-highlight-color` | The color of highlighted marker icons or labels | `--paper-grey-500`
+`--paper-slider-marker-top-icon-y-offset` | The y-offset of top icons | `-2.3em`
+`--paper-slider-marker-bottom-icon-y-offset` | The y-offset of bottom icons | `0.6em`
+`--paper-slider-marker-top-label-y-offset` | The y-offset of top labels | `-2em`
+`--paper-slider-marker-bottom-label-y-offset` | The y-offset of bottom labels | `1em`
 
 @group Paper Elements
 @element paper-slider
@@ -83,6 +92,21 @@
         --paper-progress-disabled-active-color: var(--paper-slider-disabled-active-color, --paper-grey-400);
         --paper-progress-disabled-secondary-color: var(--paper-slider-disabled-secondary-color, --paper-grey-400);
         --calculated-paper-slider-height: var(--paper-slider-height, 2px);
+        --slider-marker-label-style: {
+          position: absolute;
+          display: block;
+          font-size: 11px;
+          font-weight: bold;
+          text-transform: uppercase;
+          color: var(--paper-slider-marker-label-color, black);
+          pointer-events: all;
+        }
+        --slider-marker-icon-style: {
+          position: absolute;
+          display: block;
+          color: var(--paper-slider-marker-icon-color, black);
+          pointer-events: all;
+        }
       }
 
       /* focus shows the ripple */
@@ -137,6 +161,14 @@
         --paper-progress-height: var(--calculated-paper-slider-height);
       }
 
+      .highlight {
+        color: var(--paper-slider-marker-highlight-color, --paper-blue-700) !important;
+        -webkit-transition: color 0.3s ease-in;
+        -moz-transition: color 0.3s ease-in;
+        -o-transition: color 0.3s ease-in;
+        transition: color 0.3s ease-in;
+      }
+
       .slider-markers {
         position: absolute;
         top: calc(14px + var(--paper-slider-height,2px)/2);
@@ -151,15 +183,76 @@
       .slider-marker {
         @apply(--layout-flex);
       }
-      .slider-markers::after,
-      .slider-marker::after {
+
+      .slider-markers:not(.invisible)::after,
+      .slider-marker:not(.invisible)::after {
         content: "";
         display: block;
         margin-left: -1px;
         width: 2px;
         height: var(--calculated-paper-slider-height);
         border-radius: 50%;
-        background-color: black;
+        background-color: var(--paper-slider-marker-color, --paper-grey-800);
+      }
+
+      .slider-marker-label {
+        @apply(--slider-marker-label-style);
+        -ms-transform: translate(-50%, var(--paper-slider-marker-bottom-label-y-offset, 1em));
+        -webkit-transform: translate(-50%, var(--paper-slider-marker-bottom-label-y-offset, 1em));
+        transform: translate(-50%, var(--paper-slider-marker-bottom-label-y-offset, 1em));
+      }
+
+      .slider-marker-label.top {
+        @apply(--slider-marker-label-style);
+        -ms-transform: translate(-50%, var(--paper-slider-marker-top-label-y-offset, -2em));
+        -webkit-transform: translate(-50%, var(--paper-slider-marker-top-label-y-offset, -2em));
+        transform: translate(-50%, var(--paper-slider-marker-top-label-y-offset, -2em));
+      }
+
+      .slider-marker-icon {
+        @apply(--slider-marker-icon-style);
+        -ms-transform: translate(-50%, var(--paper-slider-marker-bottom-icon-y-offset, 0.6em));
+        -webkit-transform: translate(-50%, var(--paper-slider-marker-bottom-icon-y-offset, 0.6em));
+        transform: translate(-50%, var(--paper-slider-marker-bottom-icon-y-offset, 0.6em));
+      }
+
+      .slider-marker-icon.top {
+        @apply(--slider-marker-icon-style);
+        -ms-transform: translate(-50%, var(--paper-slider-marker-top-icon-y-offset, -2.3em));
+        -webkit-transform: translate(-50%, var(--paper-slider-marker-top-icon-y-offset, -2.3em));
+        transform: translate(-50%, var(--paper-slider-marker-top-icon-y-offset, -2.3em));
+      }
+
+      .slider-markers-label {
+        @apply(--slider-marker-label-style);
+        right: 0;
+        -ms-transform: translate(50%, var(--paper-slider-marker-bottom-label-y-offset, 1em));
+        -webkit-transform: translate(50%, var(--paper-slider-marker-bottom-label-y-offset, 1em));
+        transform: translate(50%, var(--paper-slider-marker-bottom-label-y-offset, 1em));
+      }
+
+      .slider-markers-label.top {
+        @apply(--slider-marker-label-style);
+        right: 0;
+        -ms-transform: translate(50%, var(--paper-slider-marker-top-label-y-offset, -2em));
+        -webkit-transform: translate(50%, var(--paper-slider-marker-top-label-y-offset, -2em));
+        transform: translate(50%, var(--paper-slider-marker-top-label-y-offset, -2em));
+      }
+
+      .slider-markers-icon {
+        @apply(--slider-marker-icon-style);
+        right: 0;
+        -ms-transform: translate(50%, var(--paper-slider-marker-bottom-icon-y-offset, 0.6em));
+        -webkit-transform: translate(50%, var(--paper-slider-marker-bottom-icon-y-offset, 0.6em));
+        transform: translate(50%, var(--paper-slider-marker-bottom-icon-y-offset, 0.6em));
+      }
+
+      .slider-markers-icon.top {
+        @apply(--slider-marker-icon-style);
+        right: 0;
+        -ms-transform: translate(50%, var(--paper-slider-marker-top-icon-y-offset, -2.3em));
+        -webkit-transform: translate(50%, var(--paper-slider-marker-top-icon-y-offset, -2.3em));
+        transform: translate(50%, var(--paper-slider-marker-top-icon-y-offset, -2.3em));
       }
 
       .slider-knob {
@@ -319,13 +412,44 @@
         </paper-progress>
       </div>
 
-      <template is="dom-if" if="[[snaps]]">
-        <div class="slider-markers">
-          <template is="dom-repeat" items="[[markers]]">
-            <div class="slider-marker"></div>
+      <div class="slider-markers">
+        <template is="dom-repeat" items="[[markers]]"
+          filter="_isNotLastMarker" as="marker">
+          <div class$="{{_computeClass(marker)}}">
+            <template is="dom-if" if="{{marker.icon}}" restamp>
+              <iron-icon
+                class$="{{_computeIconClass(index)}} {{marker.orientation}}"
+                value="{{_computeValue(index)}}"
+                on-tap="_handleMarkerClick"
+                src="{{marker.src}}"
+                icon="{{marker.icon}}"></iron-icon>
+            </template>
+            <template is="dom-if" if="{{marker.label}}" restamp>
+              <span
+                class$="{{_computeLabelClass(index)}} {{marker.orientation}}"
+                value="{{_computeValue(index)}}"
+                on-tap="_handleMarkerClick">{{marker.label}}</span>
           </template>
         </div>
-      </template>
+        </template>
+        <template is="dom-repeat" items="{{markers}}"
+          filter="_isLastMarker" as="marker">
+          <template is="dom-if" if="{{marker.icon}}" restamp>
+            <iron-icon
+              class$="{{_computeIconClass()}} {{marker.orientation}}"
+              value="{{_computeValue()}}"
+              on-tap="_handleMarkerClick"
+              src="{{marker.src}}"
+              icon="{{marker.icon}}"></iron-icon>
+          </template>
+          <template is="dom-if" if="{{marker.label}}" restamp>
+            <span
+              class$="{{_computeLabelClass()}} {{marker.orientation}}"
+              value="{{_computeValue()}}"
+              on-tap="_handleMarkerClick">{{marker.label}}</span>
+          </template>
+        </template>
+      </div>
 
       <div id="sliderKnob"
         class="slider-knob"
@@ -449,20 +573,66 @@
           readOnly: true
         },
 
+        /**
+         * An array of the markers representing each step
+         * along the slider. Each array value is an object,
+         * either empty (a plain marker), or containing
+         * a label or icon and possibly an orientation, e.g.
+         * "top" or "bottom" (default).
+         */
         markers: {
           type: Array,
-          readOnly: true,
           value: function() {
               return [];
-          }
+          },
+          notify: true
+        },
+
+        /**
+         * Instead of defining every marker as an
+         * array of markers, you may instead specify
+         * an object that defines icons and/or labels
+         * that should appear along the slider.  The
+         * keys are the slider values and the key values
+         * are objects that specify the icon or label
+         * and the orientation, e.g. "top" or "bottom"
+         * (default).
+         */
+        waypoints: {
+          type: Object,
+          value: function() {
+              return {};
+          },
+          notify: true
+        },
+
+        /**
+         * Display markers along the slider, even when there
+         * is no associated label or icon for that marker.
+         * Note: This will also make the markers valid "stops"
+         * for the keyboard shortcuts, i.e. '<' and '>'.
+         */
+        showPlainMarkers: {
+          type: Boolean,
+          value: false
         },
+
+        /**
+         * Highlight a marker label or icon when the slider
+         * value matches the marker value.
+         */
+        enableHighlight: {
+          type: Boolean,
+          value: false
+        }
       },
 
       observers: [
         '_updateKnob(value, min, max, snaps, step)',
         '_valueChanged(value)',
         '_immediateValueChanged(immediateValue)',
-        '_updateMarkers(maxMarkers, min, max, snaps)'
+        '_updateMarkers(maxMarkers, min, max, step)',
+        '_updateWaypoints(waypoints)'
       ],
 
       hostAttributes: {
@@ -472,7 +642,9 @@
 
       keyBindings: {
         'left down pagedown home': '_decrementKey',
-        'right up pageup end': '_incrementKey'
+        'right up pageup end': '_incrementKey',
+        '.': '_nextVisibleMarker',
+        ',': '_prevVisibleMarker'
       },
 
       /**
@@ -501,6 +673,10 @@
 
       _valueChanged: function() {
         this.fire('value-change');
+
+        if (this.markers && this.enableHighlight) {
+          this._resetMarkerHighlight();
+        }
       },
 
       _immediateValueChanged: function() {
@@ -511,6 +687,14 @@
         }
       },
 
+      _resetMarkerHighlight: function() {
+        this._removeHighlight();
+        var marker = this._visibleMarker();
+        if (marker) {
+          this._addHighlight(marker);
+        }
+      },
+
       _secondaryProgressChanged: function() {
         this.secondaryProgress = this._clampValue(this.secondaryProgress);
       },
@@ -641,17 +825,41 @@
         }
       },
 
-      _updateMarkers: function(maxMarkers, min, max, snaps) {
-        if (!snaps) {
-          this._setMarkers([]);
-        }
-        var steps = Math.round((max - min) / this.step);
+      _updateMarkers: function(maxMarkers, min, max, step) {
+        var steps = Math.round((max - min) / step);
         if (steps > maxMarkers) {
           steps = maxMarkers;
         }
+
         this._setMarkers(new Array(steps));
       },
 
+      _setMarkers: function(markers) {
+        if (this.get('markers') === undefined) this.set('markers', []);
+
+        for (var i = 0; i < markers.length; i++) {
+          var marker = markers[i] !== undefined ? markers[i] : {};
+          this.push('markers', marker);
+        }
+      },
+
+      _updateWaypoints: function(waypoints) {
+        if (Object.keys(waypoints).length === 0) return;
+
+        var markers = [];
+        for (var i = this.min; i <= this.max; i += this.step) {
+          var marker = {};
+
+          if (waypoints.hasOwnProperty(i)) {
+            marker = waypoints[i];
+          }
+
+          markers.push(marker);
+        }
+
+        this.set('markers', markers);
+      },
+
       _mergeClasses: function(classes) {
         return Object.keys(classes).filter(
           function(className) {
@@ -694,6 +902,59 @@
         }
       },
 
+      _nextVisibleMarker: function(event) {
+        if (!this.disabled) {
+          var index = (this.value / this.step) - (this.min / this.step);
+          var markerContainers = Polymer.dom(this.root).
+                                querySelectorAll('.slider-marker');
+          var marker;
+
+          if (index === markerContainers.length) {
+            // already at the end
+            return;
+          }
+
+          for (var i = index + 1; i <= markerContainers.length; i++) {
+            if (i === markerContainers.length) {
+              marker = Polymer.dom(this.root).querySelector('.slider-markers > .marker');
+            }
+            else {
+              marker = Polymer.dom(markerContainers[i]).querySelector('.marker');
+            }
+
+            if (marker && !marker.classList.contains('invisible')) {
+              this.value = this._computeValue(i);
+              this.fire('change');
+              return marker;
+            }
+          }
+        }
+      },
+
+      _prevVisibleMarker: function(event) {
+        if (!this.disabled) {
+          var index = (this.value / this.step) - (this.min / this.step);
+          var markerContainers = Polymer.dom(this.root).
+                                querySelectorAll('.slider-marker');
+          var marker;
+
+          if (index === 0) {
+            // already at origin
+            return;
+          }
+
+          for (var i = index - 1; i >= 0; i--) {
+            marker = Polymer.dom(markerContainers[i]).querySelector('.marker');
+
+            if (marker && !marker.classList.contains('invisible')) {
+              this.value = this._computeValue(i);
+              this.fire('change');
+              return marker;
+            }
+          }
+        }
+      },
+
       _changeValue: function(event) {
         this.value = event.target.value;
         this.fire('change');
@@ -725,7 +986,101 @@
           }
           this._ripple.holdDown = receivedFocusFromKeyboard;
         }
+      },
+
+      _visibleMarker: function() {
+        var index = (this.value / this.step) - (this.min / this.step);
+        var markerContainers = Polymer.dom(this.root).
+                               querySelectorAll('.slider-marker');
+        var marker;
+
+        if (index === markerContainers.length) {
+          marker = Polymer.dom(this.root).querySelector('.slider-markers > .marker');
+        }
+        else {
+          marker = Polymer.dom(markerContainers[index]).querySelector('.marker');
+        }
+
+        if (marker && !marker.classList.contains('invisible')) {
+          return marker;
+        }
+
+        return null;
+      },
+
+      _isNotLastMarker: function(marker) {
+        return marker !== this.markers[this.markers.length - 1];
+      },
+
+      _isLastMarker: function(marker) {
+        return !this._isNotLastMarker(marker);
+      },
+
+      _computeClass: function(marker) {
+        var str = "slider-marker";
+
+        if (this._markerShouldBeInvisible(marker)) {
+          str += " invisible";
+        }
+
+        return str;
+      },
+
+      _markerShouldBeInvisible: function(marker) {
+        return (marker.invisible ||
+          (Object.keys(marker).length === 0 && !this.showPlainMarkers));
+      },
+
+      _computeValue: function(index) {
+        if (index === undefined) { index = this.markers.length - 1; }
+        return (index * this.step) + this.min;
+      },
+
+      _computeIconClass: function(index) {
+        var str = "marker slider-marker";
+        if (index === undefined) { str += "s"; }
+        str += "-icon";
+
+        if (this.value === this._computeValue(index) && this.enableHighlight) {
+          str += " highlight";
+        }
+
+        return str;
+      },
+
+      _computeLabelClass: function(index) {
+        var str = "marker slider-marker";
+        if (index === undefined) { str += "s"; }
+        str += "-label";
+
+        if (this.value === this._computeValue(index) && this.enableHighlight) {
+          str += " highlight";
+        }
+
+        return str;
+      },
+
+      _addHighlight: function(marker) {
+        if (marker) {
+          marker.classList.add('highlight');
+        }
+      },
+
+      _removeHighlight: function() {
+        var marker = Polymer.dom(this.root).querySelector('.highlight');
+        if (marker) {
+          marker.classList.remove('highlight');
+        }
+      },
+
+      _handleMarkerClick: function(e) {
+        if (!this.disabled) {
+          if (this.enableHighlight) { this._removeHighlight(); }
+          this.value = e.srcElement.value;
+          this.fire('change');
+        }
       }
+
     });
 
     /**
diff --git a/test/basic.html b/test/basic.html
index 53feb80..98a91c2 100644
--- a/test/basic.html
+++ b/test/basic.html
@@ -22,13 +22,38 @@
 </head>
 <body>
 
-
   <test-fixture id="trivialProgress">
     <template>
       <paper-slider></paper-slider>
     </template>
   </test-fixture>
 
+  <test-fixture id="complexSlider">
+    <template>
+      <paper-slider
+        snaps
+        min="240"
+        max="1920"
+        step="8"
+        enable-highlight
+        value="640">
+      </paper-slider>
+    </template>
+  </test-fixture>
+
+  <test-fixture id="plainMarkerSlider">
+    <template>
+      <paper-slider
+        snaps
+        min="240"
+        max="1920"
+        step="8"
+        show-plain-markers
+        value="640">
+      </paper-slider>
+    </template>
+  </test-fixture>
+
   <script>
     suite('<paper-slider>', function() {
       var slider;
@@ -41,6 +66,10 @@
         assert.equal(slider.min, 0);
         assert.equal(slider.max, 100);
         assert.equal(slider.value, 0);
+        assert.equal(slider.markers.length, 0);
+        assert.equal(Object.keys(slider.waypoints).length, 0);
+        assert.equal(slider.enableHighlight, false);
+        assert.equal(slider.showPlainMarkers, false);
       });
 
       test('set value', function(done) {
@@ -235,6 +264,198 @@
 
     });
 
+    suite('<paper-slider> markers and waypoints', function() {
+      var slider;
+      var markers;
+      var min;
+      var max;
+      var step;
+      var totalMarkers;
+
+      setup(function(done) {
+        slider = fixture('complexSlider');
+        slider.waypoints = waypoints = {
+          '240':  { 'label': 'tiny' },
+          '480':  { 'icon': 'image:photo-size-select-small' },
+          '640':  { 'icon': 'image:photo-size-select-large' },
+          '960':  { 'label': 'native', 'orientation': 'top' },
+          '1280': { 'icon': 'image:photo-size-select-actual' },
+          '1440': { 'icon': 'icons:favorite', 'orientation': 'top' },
+          '1920': { 'label': 'huge' },
+        };
+
+        min  = slider.min;
+        max  = slider.max;
+        step = slider.step;
+
+        totalMarkers = ((max - min) / step) + 1;
+
+        flush(function() {
+          visibleMarkers = Polymer.dom(slider.root).querySelectorAll('.marker');
+          done();
+        });
+      });
+
+      test.only('total markers', function() {
+        assert.lengthOf(slider.markers, totalMarkers);
+        assert.lengthOf(visibleMarkers, Object.keys(waypoints).length);
+      });
+
+      test('jumps to the correct marker on tap', function(done) {
+        var values = Object.keys(waypoints);
+
+        async.eachOfSeries(visibleMarkers, function(marker, index, next) {
+          var eventListener = function(event) {
+            slider.removeEventListener('change', eventListener);
+            assert.equal(slider.value, values[index]);
+            next();
+          };
+
+          slider.addEventListener('change', eventListener);
+          MockInteractions.tap(marker);
+        }, done);
+      });
+
+      test('jumps to the next marker on keypress', function(done) {
+        var values = Object.keys(waypoints);
+        slider.value = values.splice(0, 1);
+
+        async.eachSeries(values, function(value, next) {
+          var eventListener = function(event) {
+            slider.removeEventListener('change', eventListener);
+            assert.equal(slider.value, value);
+            next();
+          };
+
+          slider.addEventListener('change', eventListener);
+          MockInteractions.pressAndReleaseKeyOn(slider, undefined, [], '.');
+        }, done);
+      });
+
+      test('jumps to the previous marker on keypress', function(done) {
+        var values = Object.keys(waypoints).reverse();
+        slider.value = values.splice(0, 1);
+
+        async.eachSeries(values, function(value, next) {
+          var eventListener = function(event) {
+            slider.removeEventListener('change', eventListener);
+            assert.equal(slider.value, value);
+            next();
+          };
+
+          slider.addEventListener('change', eventListener);
+          MockInteractions.pressAndReleaseKeyOn(slider, undefined, [], ',');
+        }, done);
+      });
+
+      test('highlights markers on tap', function(done) {
+        async.eachOfSeries(visibleMarkers, function(marker, index, next) {
+          var eventListener = function(event) {
+            slider.removeEventListener('change', eventListener);
+            assert.isTrue(marker.classList.contains('highlight'));
+
+            markers = Polymer.dom(slider.root).querySelectorAll('.highlight');
+            assert.lengthOf(markers, 1);
+            next();
+          };
+
+          slider.addEventListener('change', eventListener);
+          MockInteractions.tap(marker);
+        }, done);
+      });
+
+      test('highlights correct markers on keypress', function(done) {
+        slider.value = slider.min;
+
+        async.eachOfSeries(visibleMarkers, function(marker, index, next) {
+          var eventListener = function(event) {
+            slider.removeEventListener('change', eventListener);
+            assert.isTrue(marker.classList.contains('highlight'));
+
+            markers = Polymer.dom(slider.root).querySelectorAll('.highlight');
+            assert.lengthOf(markers, 1);
+            next();
+          };
+
+          slider.addEventListener('change', eventListener);
+          if (index > 0) {
+            MockInteractions.pressAndReleaseKeyOn(slider, undefined, [], '.');
+          }
+          else {
+            slider.fire('change');
+          }
+        }, done);
+      });
+
+      test('highlights correct markers on value change', function(done) {
+        var values = Object.keys(waypoints);
+
+        async.eachOfSeries(values, function(value, index, next) {
+          var eventListener = function(event) {
+            slider.removeEventListener('change', eventListener);
+            assert.isTrue(visibleMarkers[index].classList.contains('highlight'));
+
+            markers = Polymer.dom(slider.root).querySelectorAll('.highlight');
+            assert.lengthOf(markers, 1);
+            next();
+          };
+
+          slider.addEventListener('change', eventListener);
+          slider.value = value;
+          slider.fire('change');
+        }, done);
+      });
+
+      test('highlights no markers if no marker values match', function() {
+        slider.value = 648;
+        markers = Polymer.dom(slider.root).querySelectorAll('.highlight');
+        assert.lengthOf(markers, 0);
+      });
+
+      test('hides plain markers', function() {
+        var invisible = Polymer.dom(slider.root).querySelectorAll('.invisible');
+        assert.lengthOf(invisible, totalMarkers - Object.keys(waypoints).length);
+      });
+
+      test('shows plain markers', function() {
+        slider = fixture('plainMarkerSlider');
+        var invisible = Polymer.dom(slider.root).querySelectorAll('.invisible');
+        assert.lengthOf(invisible, 0);
+      });
+
+      test('adds icons', function() {
+        Object.keys(waypoints).forEach(function(key, index) {
+          var waypoint = waypoints[key];
+          if (waypoint.icon) {
+            assert.equal(visibleMarkers[index].tagName, 'IRON-ICON');
+            assert.equal(visibleMarkers[index].icon, waypoint.icon);
+          }
+          else {
+            assert.notEqual(visibleMarkers[index].tagName, 'IRON-ICON');
+          }
+        });
+      });
+
+      test('adds labels', function() {
+        Object.keys(waypoints).forEach(function(key, index) {
+          assert.equal(
+            visibleMarkers[index].tagName === 'SPAN',
+            visibleMarkers[index].innerHTML === waypoints[key].label
+          );
+        });
+      });
+
+      test('places icons and labels on the top when asked', function() {
+        Object.keys(waypoints).forEach(function(key, index) {
+          assert.equal(
+            visibleMarkers[index].classList.contains('top'),
+            waypoints[key].orientation === 'top'
+          );
+        });
+      });
+
+    });
+
   </script>
 
 </body>