feat: e.preventDefault on handleDown + set active css class

- fix text selection in firefox & IE
- fix scrolling on touch devices
- firefox is ignoring the `:active` pseudo selector because of
`e.preventDefault`. To fix this we add a `.rangeslider—active` css class

close #192

dist/rangeslider.css

@@ -85,7 +85,7 @@
   -webkit-border-radius: 50%;
   border-radius: 50%;
 }
-.rangeslider__handle:active {
+.rangeslider__handle:active, .rangeslider--active .rangeslider__handle {
   background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzAwMDAwMCIgc3RvcC1vcGFjaXR5PSIwLjEiLz48c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiMwMDAwMDAiIHN0b3Atb3BhY2l0eT0iMC4xMiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA==');
   background-size: 100%;
   background-image: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, rgba(0, 0, 0, 0.1)), color-stop(100%, rgba(0, 0, 0, 0.12)));

dist/rangeslider.js

@@ -39,6 +39,7 @@
             orientation: 'horizontal',
             rangeClass: 'rangeslider',
             disabledClass: 'rangeslider--disabled',
+            activeClass: 'rangeslider--active',
             horizontalClass: 'rangeslider--horizontal',
             verticalClass: 'rangeslider--vertical',
             fillClass: 'rangeslider__fill',
@@ -315,9 +316,14 @@
     };
 
     Plugin.prototype.handleDown = function(e) {
+        e.preventDefault();
         this.$document.on(this.moveEvent, this.handleMove);
         this.$document.on(this.endEvent, this.handleEnd);
 
+        // add active class because Firefox is ignoring
+        // the handle:active pseudo selector because of `e.preventDefault();`
+        this.$range.addClass(this.options.activeClass);
+
         // 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) {
             return;
@@ -347,6 +353,8 @@
         this.$document.off(this.moveEvent, this.handleMove);
         this.$document.off(this.endEvent, this.handleEnd);
 
+        this.$range.removeClass(this.options.activeClass);
+
         // Ok we're done fire the change event
         this.$element.trigger('change', { origin: this.identifier });
 

src/rangeslider.js

@@ -38,6 +38,7 @@
             orientation: 'horizontal',
             rangeClass: 'rangeslider',
             disabledClass: 'rangeslider--disabled',
+            activeClass: 'rangeslider--active',
             horizontalClass: 'rangeslider--horizontal',
             verticalClass: 'rangeslider--vertical',
             fillClass: 'rangeslider__fill',
@@ -314,9 +315,14 @@
     };
 
     Plugin.prototype.handleDown = function(e) {
+        e.preventDefault();
         this.$document.on(this.moveEvent, this.handleMove);
         this.$document.on(this.endEvent, this.handleEnd);
 
+        // add active class because Firefox is ignoring
+        // the handle:active pseudo selector because of `e.preventDefault();`
+        this.$range.addClass(this.options.activeClass);
+
         // 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) {
             return;
@@ -346,6 +352,8 @@
         this.$document.off(this.moveEvent, this.handleMove);
         this.$document.off(this.endEvent, this.handleEnd);
 
+        this.$range.removeClass(this.options.activeClass);
+
         // Ok we're done fire the change event
         this.$element.trigger('change', { origin: this.identifier });
 

src/rangeslider.scss

@@ -4,6 +4,7 @@ $rangeslider:               ".rangeslider";
 $rangeslider--horizontal:   ".rangeslider--horizontal";
 $rangeslider--vertical:     ".rangeslider--vertical";
 $rangeslider--disabled:     ".rangeslider--disabled";
+$rangeslider--active:       ".rangeslider--active";
 $rangeslider__fill:         ".rangeslider__fill";
 $rangeslider__handle:       ".rangeslider__handle";
 
@@ -76,7 +77,8 @@ $rangeslider__handle:       ".rangeslider__handle";
         @include border-radius(50%);
     }
 
-    &:active {
+    &:active,
+    #{$rangeslider--active} & {
         @include background-image(linear-gradient(rgba(black, .10), rgba(black, .12)));
     }