Add CSS Transition to Slider Change

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;

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:   ".3s";
+$rangeslider__transition__type:   "ease-in-out";
 
 #{$rangeslider},
 #{$rangeslider__fill} {
@@ -12,10 +16,22 @@ $rangeslider__handle:   ".rangeslider__handle";
     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} {
     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 {
@@ -31,7 +47,6 @@ $rangeslider__handle:   ".rangeslider__handle";
 #{$rangeslider__handle} {
     background: white;
     border: 1px solid #ccc;
-    cursor: pointer;
     display: inline-block;
     width: 40px;
     height: 40px;