diff --git a/internal/wat-slider/index.html b/internal/wat-slider/index.html
new file mode 100644
index 0000000..7d28bd3
--- /dev/null
+++ b/internal/wat-slider/index.html
@@ -0,0 +1,89 @@
+<!--
+Copyright 2014 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations
+under the License.
+-->
+
+<!doctype html>
+
+<link rel="import" href="../../../polymer/polymer.html">
+<script src="../../../platform/platform.js"></script>
+<link rel="import" href="wat-slider.html">
+<link rel="import" href="../wat-button/wat-button.html">
+
+<polymer-element name="wat-slider-button-demo" attributes="textSize step min max">
+  <template>
+    <style>
+       @import url('http://fonts.googleapis.com/css?family=Roboto');
+      :host {
+        font-family: Roboto, sans-serif;
+      }
+      label,
+      wat-slider,
+      #text-size,
+      wat-button {
+        width: 200px;
+      }
+      label {
+        display: block;
+      }
+      label,
+      #text-size {
+        text-align: center;
+      }
+      #text-size {
+        font-size: {{textSize}}px;
+      }
+      .black {
+        color: black;
+      }
+      .red {
+        color: red;
+      }
+    </style>
+    <label for="slider">Change Text Size:</label>
+    <wat-slider id="slider" value="{{textSize}}" min="{{min}}" max="{{max}}" step="{{step}}"></wat-slider>
+    <div id="text-size">{{textSize}}</div>
+    <wat-button on-click="{{changeColour}}">{{buttonText}}</wat-button>
+  </template>
+  <script>
+    Polymer('wat-slider-button-demo', {
+      textSize: 50,
+      min: 0,
+      max: 100,
+      step: 1,
+      colour: 'black',
+      buttonText: 'Make Text Red',
+      ready: function() {
+        this.textSize = (this.max + this.min) / 2;
+        this.$['text-size'].classList.add(this.colour);
+      },
+      colourChanged: function() {
+        if (this.colour == 'red') {
+          this.$['text-size'].classList.remove('black');
+          this.$['text-size'].classList.add('red');
+          this.buttonText = 'Make Text Black';
+        } else {
+          this.$['text-size'].classList.remove('red');
+          this.$['text-size'].classList.add('black');
+          this.buttonText = 'Make Text Red';
+        }
+      },
+      changeColour: function() {
+        this.colour = this.colour == 'red' ? 'black' : 'red';
+      }
+    });
+  </script>
+</polymer-element>
+
+<wat-slider-button-demo step="2"></wat-slider-button-demo>
diff --git a/internal/wat-slider/wat-slider.html b/internal/wat-slider/wat-slider.html
new file mode 100644
index 0000000..cc9d66a
--- /dev/null
+++ b/internal/wat-slider/wat-slider.html
@@ -0,0 +1,55 @@
+<!--
+Copyright 2014 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and limitations
+under the License.
+-->
+
+<!DOCTYPE html>
+
+<link rel="import" href="../../../polymer/polymer.html">
+
+<polymer-element name="wat-slider" attributes="value step min max title" noscript>
+  <template>
+    <style>
+      :host {
+        display: flex;
+        align-items: center;
+      }
+      .slider {
+        flex-grow: 1;
+        -webkit-appearance: none;
+        outline: none;
+        overflow: hidden;
+        border: 1px solid rgba(221,221,221,1);
+        background-color: white;
+        border-radius: 99px;
+        box-shadow: 1px 1px 3px rgba(0,0,0,.21) inset;
+        cursor: pointer;
+      }
+      .slider::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        background: rgba(66, 133, 244, 1);
+        height: 13px;
+        width: 13px;
+        border-radius: 50%;
+        box-shadow: -1px -1px 5px rgba(0,0,0,.42) inset,
+            -1px -1px 4px 3px rgba(66,133,244,.84) inset,
+            1px 1px 3px rgba(0,0,0,.3),
+            -203px 0 0 198px rgba(66,133,244,.42);
+        cursor: pointer;
+      }
+    </style>
+    <input class="slider" type="range" value="{{value}}" step="{{step}}"
+        min="{{min}}" max="{{max}}" title="{{title}}">
+  </template>
+</polymer-element>
diff --git a/wat-player-controls/wat-player-controls.html b/wat-player-controls/wat-player-controls.html
index 04b9a4f..d559228 100644
--- a/wat-player-controls/wat-player-controls.html
+++ b/wat-player-controls/wat-player-controls.html
@@ -38,6 +38,7 @@
 
 <link rel="import" href="../../polymer/polymer.html">
 <link rel="import" href="../internal/wat-button/wat-button.html">
+<link rel="import" href="../internal/wat-slider/wat-slider.html">
 <link href="//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css" rel="stylesheet">
 
 <polymer-element name="wat-player-controls" attributes="step">
@@ -62,34 +63,6 @@
         background-color: white;
       }
 
-      .scrubber {
-        -webkit-appearance: none;
-        margin: 2px;
-        width: 150px;
-        vertical-align: middle;
-        outline: none;
-        overflow: hidden;
-        border: 1px solid rgba(221,221,221,1);
-        background-color: white;
-        border-radius: 99px;
-        box-shadow: 1px 1px 3px rgba(0,0,0,.21) inset;
-        cursor: pointer;
-      }
-      
-      
-      .scrubber::-webkit-slider-thumb {
-        -webkit-appearance: none;
-        background: rgba(66, 133, 244, 1);
-        height: 13px;
-        width: 13px;
-        border-radius: 50%;
-        box-shadow: -1px -1px 5px rgba(0,0,0,.42) inset,
-            -1px -1px 4px 3px rgba(66,133,244,.84) inset,
-            1px 1px 3px rgba(0,0,0,.3),
-            -203px 0 0 198px rgba(66,133,244,.42);
-        cursor: pointer;
-      }
-
       .number {
         width: 4em;
         margin: 2px;
@@ -104,6 +77,10 @@
         border: 1px solid rgba(66,133,244,1);
         outline: none;
       }
+
+      wat-slider {
+        width: 156px;
+      }
     </style>
 
     <wat-button on-click="{{playPause}}" title="Play / Pause">
@@ -127,10 +104,11 @@
     </wat-button>
     <input class="number" type="Number" value="{{player.playbackRate}}"
         step="0.1" title="Playback Rate">
-    <input class="scrubber" type="range" value="{{player.currentTime}}" 
-        step="{{step}}" min="{{player.source.startTime}}"
-        max="{{player.source.endTime}}" on-pointerup="{{resume}}"
-        on-pointerdown="{{pauseWhileSeeking}}" title="Adjust Current Time">
+    <wat-slider value="{{player.currentTime}}" step="{{step}}"
+        min="{{player.source.startTime}}" max="{{player.source.endTime}}"
+        on-pointerdown="{{pauseWhileSeeking}}" on-pointerup="{{resume}}"
+        title="Adjust Current Time">
+    </wat-slider>
   </template>
   
   <script>
