From fc16fa508fc7000955642604dfcf8143cafca1d4 Mon Sep 17 00:00:00 2001
From: Sean Slevin <sean@enigmasolved.com>
Date: Wed, 13 Aug 2014 13:32:46 -0400
Subject: [PATCH 1/4] Add SCSS for CSS3 Transitions on Slider Change

---
 src/rangeslider.scss | 15 +++++++++++++++
 1 file changed, 15 insertions(+)

diff --git a/src/rangeslider.scss b/src/rangeslider.scss
index c6d72dc..58c6fe9 100644
--- a/src/rangeslider.scss
+++ b/src/rangeslider.scss
@@ -3,6 +3,10 @@
 $rangeslider:           ".rangeslider";
 $rangeslider__fill:     ".rangeslider__fill";
 $rangeslider__handle:   ".rangeslider__handle";
+$rangeslider__transition:   ".rangeslider__transition";
+$rangeslider__transition__use:   true; // Set to false to disable transition.
+$rangeslider__transition__speed:   ".25s";
+$rangeslider__transition__type:   "ease-in-out";
 
 #{$rangeslider},
 #{$rangeslider__fill} {
@@ -16,6 +20,17 @@ $rangeslider__handle:   ".rangeslider__handle";
 
 #{$rangeslider} {
     position: relative;
+    
+    @if $rangeslider__transition__use {
+		&#{$rangeslider__transition} {
+			#{$rangeslider__fill} {
+				@include single-transition(width, #{$rangeslider__transition__speed}, #{$rangeslider__transition__type});
+			}
+			#{$rangeslider__handle} {
+				@include single-transition(left, #{$rangeslider__transition__speed}, #{$rangeslider__transition__type});
+			}
+		}
+	}
 }
 
 #{$rangeslider}--disabled {

From 471a14fb2f0cf242e4aff45f5c4cc02da544ad73 Mon Sep 17 00:00:00 2001
From: Sean Slevin <sean@enigmasolved.com>
Date: Wed, 13 Aug 2014 13:41:54 -0400
Subject: [PATCH 2/4] Add JS for Adding/Removing Transition Class

---
 src/rangeslider.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/rangeslider.js b/src/rangeslider.js
index 0b8317e..bf98a93 100644
--- a/src/rangeslider.js
+++ b/src/rangeslider.js
@@ -30,10 +30,12 @@
         inputrange = supportsRange(),
         defaults = {
             polyfill: true,
+            useTransition: true,
             rangeClass: 'rangeslider',
             disabledClass: 'rangeslider--disabled',
             fillClass: 'rangeslider__fill',
             handleClass: 'rangeslider__handle',
+            transitionClass: 'rangeslider__transition',
             startEvent: ['mousedown', 'touchstart', 'pointerdown'],
             moveEvent: ['mousemove', 'touchmove', 'pointermove'],
             endEvent: ['mouseup', 'touchend', 'pointerup']
@@ -179,9 +181,18 @@
 
         // If we click on the handle don't set the new position
         if ((' ' + e.target.className + ' ').replace(/[\n\t]/g, ' ').indexOf(this.options.handleClass) > -1) {
+            // Remove transition class, since we don't need it while dragging handle, and it can slow down the dragging interaction.
+            if (this.options.useTransition) {
+                this.$range.removeClass(this.options.transitionClass);
+            }
             return;
         }
-
+        
+        // Only add transition class *after* above "return", so that if user is performing a "drag" on the handle we don't bother with the transition animation.
+        if (this.options.useTransition) {
+            this.$range.addClass(this.options.transitionClass);
+        }
+        
         var posX    = this.getRelativePosition(e),
             rangeX  = this.$range[0].getBoundingClientRect().left,
             handleX = this.getPositionFromNode(this.$handle[0]) - rangeX;

From d66a5c01abe4cde308c00f9516009e89fc308792 Mon Sep 17 00:00:00 2001
From: Sean Slevin <sean@enigmasolved.com>
Date: Wed, 13 Aug 2014 17:38:49 -0400
Subject: [PATCH 3/4] Change transitions speed to .3s

---
 src/rangeslider.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/rangeslider.scss b/src/rangeslider.scss
index 58c6fe9..5efc851 100644
--- a/src/rangeslider.scss
+++ b/src/rangeslider.scss
@@ -5,7 +5,7 @@ $rangeslider__fill:     ".rangeslider__fill";
 $rangeslider__handle:   ".rangeslider__handle";
 $rangeslider__transition:   ".rangeslider__transition";
 $rangeslider__transition__use:   true; // Set to false to disable transition.
-$rangeslider__transition__speed:   ".25s";
+$rangeslider__transition__speed:   ".3s";
 $rangeslider__transition__type:   "ease-in-out";
 
 #{$rangeslider},

From 818438bcea11a61602d9f5581526c5dbc4342340 Mon Sep 17 00:00:00 2001
From: Sean Slevin <sean@enigmasolved.com>
Date: Sat, 16 Aug 2014 18:52:29 -0400
Subject: [PATCH 4/4] Added Pointer for entire range

I think this is helpful particularly for desktop in that clicking on the range can be easier with a mouse that clicking and dragging the handle. Adding the Pointer style for the whole range thus clues the user into the fact that the entire range is clickable.

I also removed the Pointer from the handle class as it seems redundant with having added it to the whole range.
---
 src/rangeslider.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/rangeslider.scss b/src/rangeslider.scss
index 5efc851..bba54ea 100644
--- a/src/rangeslider.scss
+++ b/src/rangeslider.scss
@@ -16,6 +16,7 @@ $rangeslider__transition__type:   "ease-in-out";
     width: 100%;
     @include box-shadow(0px 2px 2px rgba(255,255,255,0.25), inset 0px 1px 3px rgba(0,0,0,0.3));
     @include border-radius(10px);
+    cursor: pointer;
 }
 
 #{$rangeslider} {
@@ -46,7 +47,6 @@ $rangeslider__transition__type:   "ease-in-out";
 #{$rangeslider__handle} {
     background: white;
     border: 1px solid #ccc;
-    cursor: pointer;
     display: inline-block;
     width: 40px;
     height: 40px;