From f469d01d7ace831fdd35ab958ebb131e421b9dd2 Mon Sep 17 00:00:00 2001
From: scott-madin <scott.madin@sonos.com>
Date: Thu, 24 Mar 2016 15:57:11 -0400
Subject: [PATCH 1/3] Add drag-started and drag-ended events

fire custom events when dragging starts and when dragging ends.
---
 js/simple-slider.js | 20 ++++++++++++++++++++
 1 file changed, 20 insertions(+)

diff --git a/js/simple-slider.js b/js/simple-slider.js
index 1a02e5b..8004f68 100644
--- a/js/simple-slider.js
+++ b/js/simple-slider.js
@@ -78,6 +78,15 @@ var __slice = [].slice,
         }
         _this.dragging = true;
         _this.dragger.addClass("dragging");
+        ratio = _this.valueToRatio(this.value);
+        var eventData = {
+          value: _this.value,
+          ratio: ratio,
+          position: ratio * _this.slider.outerWidth(),
+          el: _this.slider
+        };
+
+        _this.input.trigger("slider:drag-started", eventData);
         _this.domDrag(e.pageX, e.pageY);
         return false;
       });
@@ -92,6 +101,17 @@ var __slice = [].slice,
         if (_this.dragging) {
           _this.dragging = false;
           _this.dragger.removeClass("dragging");
+          ratio = _this.valueToRatio(this.value);
+          var eventData = {
+            value: _this.value,
+            ratio: ratio,
+            position: ratio * _this.slider.outerWidth(),
+            el: _this.slider
+          };
+
+          _this.input.trigger("slider:drag-ended", eventData);
+          // Post final position here
+          _this.domDrag(e.pageX, e.pageY, false);
           return $("body").css({
             cursor: "auto"
           });

From 976f2ba91bd9c0c6172dd8b6904296e278067f81 Mon Sep 17 00:00:00 2001
From: scott-madin <scott.madin@sonos.com>
Date: Thu, 24 Mar 2016 15:57:49 -0400
Subject: [PATCH 2/3] Cleanup attr() call

Use data() instead of attr() for consistency
---
 js/simple-slider.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/js/simple-slider.js b/js/simple-slider.js
index 8004f68..1715730 100644
--- a/js/simple-slider.js
+++ b/js/simple-slider.js
@@ -371,7 +371,7 @@ var __slice = [].slice,
       if ($el.data("slider-theme")) {
         settings.theme = $el.data("slider-theme");
       }
-      if ($el.attr("data-slider-highlight")) {
+      if ($el.data("slider-highlight")) {
         settings.highlight = $el.data("slider-highlight");
       }
       if ($el.data("slider-animate") != null) {

From 29881a42f62914cbae62f2362cf5bbd92836a78f Mon Sep 17 00:00:00 2001
From: scott-madin <scott.madin@sonos.com>
Date: Thu, 24 Mar 2016 16:10:28 -0400
Subject: [PATCH 3/3] factor out event construction

No need to repeat the event construction block four times, easier to
have a helper method.
---
 js/simple-slider.js | 47 +++++++++++++++------------------------------
 1 file changed, 15 insertions(+), 32 deletions(-)

diff --git a/js/simple-slider.js b/js/simple-slider.js
index 1715730..0ccbea7 100644
--- a/js/simple-slider.js
+++ b/js/simple-slider.js
@@ -14,8 +14,7 @@ var __slice = [].slice,
   SimpleSlider = (function() {
 
     function SimpleSlider(input, options) {
-      var ratio,
-        _this = this;
+      var _this = this;
       this.input = input;
       this.defaultOptions = {
         animate: true,
@@ -78,15 +77,7 @@ var __slice = [].slice,
         }
         _this.dragging = true;
         _this.dragger.addClass("dragging");
-        ratio = _this.valueToRatio(this.value);
-        var eventData = {
-          value: _this.value,
-          ratio: ratio,
-          position: ratio * _this.slider.outerWidth(),
-          el: _this.slider
-        };
-
-        _this.input.trigger("slider:drag-started", eventData);
+        _this.input.trigger("slider:drag-started", _this._makeEventData());
         _this.domDrag(e.pageX, e.pageY);
         return false;
       });
@@ -101,15 +92,7 @@ var __slice = [].slice,
         if (_this.dragging) {
           _this.dragging = false;
           _this.dragger.removeClass("dragging");
-          ratio = _this.valueToRatio(this.value);
-          var eventData = {
-            value: _this.value,
-            ratio: ratio,
-            position: ratio * _this.slider.outerWidth(),
-            el: _this.slider
-          };
-
-          _this.input.trigger("slider:drag-ended", eventData);
+          _this.input.trigger("slider:drag-ended", _this._makeEventData());
           // Post final position here
           _this.domDrag(e.pageX, e.pageY, false);
           return $("body").css({
@@ -125,13 +108,7 @@ var __slice = [].slice,
         this.value = this.nearestValidValue(this.input.val());
       }
       this.setSliderPositionFromValue(this.value);
-      ratio = this.valueToRatio(this.value);
-      this.input.trigger("slider:ready", {
-        value: this.value,
-        ratio: ratio,
-        position: ratio * this.slider.outerWidth(),
-        el: this.slider
-      });
+      this.input.trigger("slider:ready", this._makeEventData());
     }
 
     SimpleSlider.prototype.createDivElement = function(classname) {
@@ -312,14 +289,20 @@ var __slice = [].slice,
         return;
       }
       this.value = value;
-      eventData = {
-        value: value,
-        ratio: ratio,
-        position: ratio * this.slider.outerWidth(),
+      eventData = this._makeEventData(value, ratio, trigger);
+      return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
+    };
+
+    SimpleSlider.prototype._makeEventData = function(value, ratio, trigger) {
+      var v = value || this.value,
+          r = ratio || this.valueToRatio(v);
+      return {
+        value: v,
+        ratio: r,
+        position: r * this.slider.outerWidth(),
         trigger: trigger,
         el: this.slider
       };
-      return this.input.val(value).trigger($.Event("change", eventData)).trigger("slider:changed", eventData);
     };
 
     return SimpleSlider;