Permalink
Browse files

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
  • Loading branch information...
andreruffert committed Nov 30, 2016
1 parent 9c722f8 commit 8c5474cc5dbbf8a7a843cbfae79a46a7a6938893
Showing with 21 additions and 3 deletions.
  1. +1 −1 dist/rangeslider.css
  2. +8 −0 dist/rangeslider.js
  3. +1 −1 dist/rangeslider.min.js
  4. +8 −0 src/rangeslider.js
  5. +3 −1 src/rangeslider.scss
View
@@ -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)));
View
@@ -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 });
View

Some generated files are not rendered by default. Learn more.

Oops, something went wrong.
View
@@ -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 });
View
@@ -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)));
}

0 comments on commit 8c5474c

Please sign in to comment.