diff --git a/src/static/js/broadcast_slider.js b/src/static/js/broadcast_slider.js
index 1a7dff961..45f8cfe8d 100644
--- a/src/static/js/broadcast_slider.js
+++ b/src/static/js/broadcast_slider.js
@@ -24,167 +24,7 @@
  // Timeslider controller would probably be more appropriate.
 var _ = require('./underscore');
 var padmodals = require('./pad_modals').padmodals;
-require("./jquery.class");
-
-/**
- * A class for anything which can be hung off of the slider bar.
- * I.e. this is for the handle, or saved-revisions (stars).
- * TODO:
- *  - handle mousedowns/clicks
- *  - handle drags
- */
-$.Class("SliderHandleUI",
-  {//statics
-  },
-  {//instance
-    /**
-     * Construct the SliderHandle.
-     * @param {SliderUI} slider The slider from which this handle will be hung.
-     * @param {Number} position The initial position for this handle.
-     */
-    init: function (slider, value, type) {
-      console.log("New SliderHandle(%d, %s)", value, type);
-      this.slider = slider;
-      this.value = value;
-      //create the element:
-      this.element = $("<div class='ui-slider-handle'></div>");
-      if (type === "")
-        type = "handle";
-      this.element.addClass("ui-slider-handle-" + type);
-      this._mouseInit();
-    },
-    _mouseInit: function () {
-      this.element.on("mousedown.sliderhandle", null, this, function(event) {
-        console.log("sliderhandleui - mousedown")
-      })
-    },
-  }
-);
-
-SliderHandleUI("SliderSavedRevisionUI",
-  {//statics
-  },
-  {//instance
-    init: function(slider, revision) {
-      this._super(slider, revision.revNum, 'star');
-      this.revision = revision;
-    },
-    _mouseInit: function () {
-      this.element.on("mousedown.sliderhandle", null, this, function(event) {
-        console.log("SliderSavedRevisionUI - mousedown")
-      })
-    },
-  }
-);
-
-//TODO:
-//  - window resizing is currently broken!
-//  - keyboard events
-$.Class("SliderUI",
-  {//statics
-    defaults: {
-      min: 0,
-      max: 100,
-    }
-  },
-  {//instance
-    init: function (element, options) {
-      this.options = $.extend({}, this.defaults, options);
-      this.element = element;
-      this.current_value = "value" in this.options ? this.options.value : 0;
-      this.handles = [];
-      this.attachHandle(new SliderHandleUI(this, this._current_value, 'handle'));
-      this._mouseInit();
-
-      // handle window resize
-      var _this = this;
-      $(window).resize(function() {
-        _this.render();
-      });
-    },
-    _getStep: function () {
-      return (this.element.width()) / (this.options.max * 1.0);
-    },
-    render: function () {
-      for(var h in this.handles) {
-        handle = this.handles[h];
-        handle.element.css('left', (handle.value * this._getStep()) );
-      }
-    },
-    // this internal version of _setValue should only be used to render
-    // when the handle changes position as a result of UI events handled
-    // by this slider.
-    _setValue: function (value) {
-      if (value < 0)
-        value = 0;
-      if (value > this.options.max)
-        value = this.options.max;
-      this.handles[0].value = value;
-      this.current_value = value;
-      this.render();
-    },
-    // this 'public' version of _setValue also triggers a change event
-    setValue: function(value) {
-      this._setValue(value);
-      this._trigger("change", value);
-    },
-    setMax: function (max) {
-      this.options.max = max;
-      this.render();
-    },
-    attachHandle: function (handle) {
-      this.handles.push(handle);
-      this.element.append(handle.element);
-      this.current_value = this.handles[0].value;
-      return handle;
-    },
-    _trigger: function (eventname, value) {
-      //TODO: implement trigger
-      console.log("triggering event: ", eventname);
-      if (eventname in this.options) {
-        this.options[eventname](value);
-      }
-    },
-    _mouseInit: function () {
-      // handle all mouse events for the slider and handles right here
-      var _this = this;
-      this.element.on("mousedown.slider", function (event) {
-        if (event.target == _this.element[0] || $(event.target).hasClass("ui-slider-handle")) {
-          // the click is on the slider bar itself.
-          var start_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
-          console.log("sliderbar mousedown, value:", start_value);
-          if (_this.current_value != start_value)
-            _this._setValue(start_value);
-
-          $(document).on("mousemove.slider", function (event) {
-             var current_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
-             console.log("sliderbar mousemove, value:", current_value);
-             // don't change the value if it hasn't actually changed!
-             if (_this.current_value != current_value) {
-               _this._setValue(current_value);
-               _this._trigger("slide", current_value);
-             }
-          });
-
-          $(document).on("mouseup.slider", function (event) {
-            // make sure to get rid of the handlers on document,
-            // we don't need them after this 'slide' session is done.
-            $(document).off("mouseup.slider mousemove.slider");
-             var end_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
-             console.log("sliderbar mouseup, value:", end_value);
-             // always change the value at mouseup
-            _this._setValue(end_value);
-            _this._trigger("change", end_value);
-
-          });
-        } else {
-          console.log("We shouldn't be here!")
-          console.log(event.target);
-        }
-      })
-    },
-  }
-);
+var sliderui = require('./sliderui');
 
 $.Class("RevisionSlider",
   {//statics
@@ -230,7 +70,7 @@ $.Class("RevisionSlider",
     loadSavedRevisionHandles: function () {
       for (var r in this.timeslider.savedRevisions) {
         var rev = this.timeslider.savedRevisions[r];
-        this.slider.attachHandle(new SliderSavedRevisionUI(this, rev));
+        this.slider.createHandle(rev.revNum, "star");
       };
     },
     goToRevision: function (revNum) {
diff --git a/src/static/js/sliderui.js b/src/static/js/sliderui.js
new file mode 100644
index 000000000..44a16c72b
--- /dev/null
+++ b/src/static/js/sliderui.js
@@ -0,0 +1,169 @@
+/**
+ * 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.
+ */
+require("./jquery.class");
+
+/**
+ * This is an implementation of a (very) simple Slider UI.
+ *
+ * Create a slider by doing:
+ *    slider = new SliderUI(sliderbar_element, options);
+ * sliderbar_element should be a jquery wraper of the element which will serve as
+ *  the bar on which the handles will be hung.
+ * optionalions is an optional dictionary which currently supports the following:
+ *    value = the initial value for the default handle (default: 0)
+ *    max   = the maximum value for the slider (default: 100)
+ */
+
+
+/**
+ * A class for anything which can be hung off of the slider bar.
+ * I.e. this is for the handle, or saved-revisions (stars).
+ */
+$.Class("SliderHandleUI",
+  {//statics
+  },
+  {//instance
+    /**
+     * Construct the SliderHandle.
+     * @param {SliderUI} slider The slider from which this handle will be hung.
+     * @param {Number} position The initial position for this handle.
+     */
+    init: function (slider, value, type) {
+      console.log("New SliderHandle(%d, %s)", value, type);
+      this.slider = slider;
+      this.value = value;
+      //create the element:
+      this.element = $("<div class='ui-slider-handle'></div>");
+      if (type === "")
+        type = "handle";
+      this.element.addClass("ui-slider-handle-" + type);
+      this._mouseInit();
+    },
+    _mouseInit: function () {
+      this.element.on("mousedown.sliderhandle", null, this, function(event) {
+        console.log("sliderhandleui - mousedown")
+      })
+    },
+  }
+);
+
+//TODO:
+//  - window resizing is currently broken!
+//  - keyboard events
+$.Class("SliderUI",
+  {//statics
+    defaults: {
+      min: 0,
+      max: 100,
+      value: 0,
+    }
+  },
+  {//instance
+    init: function (element, options) {
+      this.options = $.extend({}, this.defaults, options);
+      this.element = element;
+      this.current_value = this.options.value;
+      this.handles = [];
+      this.createHandle(this.current_value, 'handle');
+      this._mouseInit();
+
+      // handle window resize
+      var _this = this;
+      $(window).resize(function() {
+        _this.render();
+      });
+    },
+    _getStep: function () {
+      return (this.element.width()) / (this.options.max * 1.0);
+    },
+    render: function () {
+      for(var h in this.handles) {
+        handle = this.handles[h];
+        handle.element.css('left', (handle.value * this._getStep()) );
+      }
+    },
+    // this internal version of _setValue should only be used to render
+    // when the handle changes position as a result of UI events handled
+    // by this slider.
+    _setValue: function (value) {
+      if (value < 0)
+        value = 0;
+      if (value > this.options.max)
+        value = this.options.max;
+      this.handles[0].value = value;
+      this.current_value = value;
+      this.render();
+    },
+    // this 'public' version of _setValue also triggers a change event
+    setValue: function(value) {
+      this._setValue(value);
+      this._trigger("change", value);
+    },
+    setMax: function (max) {
+      this.options.max = max;
+      this.render();
+    },
+    createHandle: function (value, type) {
+      console.log("createHandle(%d, %s)", value, type)
+      var handle = new SliderHandleUI(this, value, type);
+      this.handles.push(handle);
+      this.element.append(handle.element);
+      return handle;
+    },
+    _trigger: function (eventname, value) {
+      console.log("triggering event: ", eventname);
+      if (eventname in this.options) {
+        this.options[eventname](value);
+      }
+    },
+    _mouseInit: function () {
+      // handle all mouse events for the slider and handles right here
+      var _this = this;
+      this.element.on("mousedown.slider", function (event) {
+        if (event.target == _this.element[0] || $(event.target).hasClass("ui-slider-handle")) {
+          // the click is on the slider bar itself.
+          var start_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
+          console.log("sliderbar mousedown, value:", start_value);
+          if (_this.current_value != start_value)
+            _this._setValue(start_value);
+
+          $(document).on("mousemove.slider", function (event) {
+             var current_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
+             console.log("sliderbar mousemove, value:", current_value);
+             // don't change the value if it hasn't actually changed!
+             if (_this.current_value != current_value) {
+               _this._setValue(current_value);
+               _this._trigger("slide", current_value);
+             }
+          });
+
+          $(document).on("mouseup.slider", function (event) {
+            // make sure to get rid of the handlers on document,
+            // we don't need them after this 'slide' session is done.
+            $(document).off("mouseup.slider mousemove.slider");
+             var end_value = Math.floor((event.clientX-_this.element.offset().left) / _this._getStep());
+             console.log("sliderbar mouseup, value:", end_value);
+             // always change the value at mouseup
+            _this._setValue(end_value);
+            _this._trigger("change", end_value);
+
+          });
+        } else {
+          console.log("We shouldn't be here!")
+          console.log(event.target);
+        }
+      })
+    },
+  }
+);