Skip to content
This repository has been archived by the owner on May 30, 2024. It is now read-only.

Add CSS Transition to Slider Change #84

Open
wants to merge 4 commits into
base: develop
Choose a base branch
from
Open
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
13 changes: 12 additions & 1 deletion src/rangeslider.js
Original file line number Diff line number Diff line change
Expand Up @@ -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']
Expand Down Expand Up @@ -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;
Expand Down
17 changes: 16 additions & 1 deletion src/rangeslider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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} {
Expand All @@ -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 {
Expand All @@ -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;
Expand Down