diff --git a/src/definitions/modules/range.js b/src/definitions/modules/range.js
index ce61fd6cb..03ac7417c 100644
--- a/src/definitions/modules/range.js
+++ b/src/definitions/modules/range.js
@@ -27,6 +27,7 @@ $.fn.range = function(parameters) {
query = arguments[0],
methodInvoked = (typeof query == 'string'),
queryArguments = [].slice.call(arguments, 1),
+
alphabet = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I', 'J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R', 'S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'],
SINGLE_STEP = 1,
@@ -49,7 +50,6 @@ $.fn.range = function(parameters) {
className = settings.className,
metadata = settings.metadata,
namespace = settings.namespace,
- input = settings.input,
error = settings.error,
keys = settings.keys,
@@ -58,7 +58,9 @@ $.fn.range = function(parameters) {
moduleNamespace = 'module-' + namespace,
$module = $(this),
+ $currThumb,
$thumb,
+ $secondThumb,
$track,
$trackFill,
$labels,
@@ -68,6 +70,7 @@ $.fn.range = function(parameters) {
value,
position,
+ secondPos,
offset,
precision,
isTouch,
@@ -81,11 +84,15 @@ $.fn.range = function(parameters) {
module.debug('Initializing range slider', settings);
isTouch = module.setup.testOutTouch();
module.setup.layout();
+
if(!module.is.disabled())
module.bind.events();
+
module.read.metadata();
module.read.settings();
+
module.instantiate();
+ settings.onChange.call(element, value);
},
instantiate: function() {
@@ -113,7 +120,13 @@ $.fn.range = function(parameters) {
if($module.find('.inner').length == 0)
$module.append("");
precision = module.get.precision();
- $thumb = $module.find('.thumb');
+ $thumb = $module.find('.thumb:not(.second)');
+ $currThumb = $thumb;
+ if(module.is.doubled()) {
+ if($module.find('.thumb.second').length == 0)
+ $module.find('.inner').append("");
+ $secondThumb = $module.find('.thumb.second');
+ }
$track = $module.find('.track');
$trackFill = $module.find('.track-fill');
offset = $thumb.width()/2;
@@ -257,6 +270,13 @@ $.fn.range = function(parameters) {
event: {
down: function(event, originalEvent) {
event.preventDefault();
+ if(module.is.doubled()) {
+ var
+ eventPos = module.determine.eventPos(event, originalEvent),
+ newPos = module.determine.pos(eventPos)
+ ;
+ $currThumb = module.determine.closestThumb(newPos);
+ }
if(!module.is.disabled())
module.bind.slidingEvents();
},
@@ -267,7 +287,7 @@ $.fn.range = function(parameters) {
newPos = module.determine.pos(eventPos)
;
if (eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
- module.set.valueBasedPosition(newPos);
+ module.set.position(newPos);
}
},
up: function(event, originalEvent) {
@@ -277,7 +297,7 @@ $.fn.range = function(parameters) {
newPos = module.determine.pos(eventPos)
;
if(eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
- module.set.valueMoveToValueBasedPosition(newPos);
+ module.set.value(module.determine.value(newPos));
}
module.unbind.slidingEvents();
},
@@ -319,25 +339,28 @@ $.fn.range = function(parameters) {
var
multiplier = multiplier != undefined ? multiplier : 1,
step = module.get.step(),
- currValue = module.get.value()
+ currValue = module.get.currentThumbValue()
;
module.verbose('Taking a step');
if(step > 0)
- module.set.positionBasedValue(currValue + step * multiplier);
+ module.set.value(currValue + step * multiplier);
},
backStep: function(multiplier) {
var
multiplier = multiplier != undefined ? multiplier : 1,
step = module.get.step(),
- currValue = module.get.value()
+ currValue = module.get.currentThumbValue()
;
module.verbose('Going back a step');
if(step > 0)
- module.set.positionBasedValue(currValue - step * multiplier);
+ module.set.value(currValue - step * multiplier);
},
is: {
+ doubled: function() {
+ return $module.hasClass(settings.className.doubled);
+ },
hover: function() {
return isHover;
},
@@ -437,33 +460,88 @@ $.fn.range = function(parameters) {
return value;
}
},
- trackPos: function() {
- if(module.is.vertical()) {
- return module.is.reversed() ? module.get.trackLength() - ($trackFill.position().top + $trackFill.height()) : $trackFill.position().top;
- } else {
- return module.is.reversed() ? module.get.trackLength() - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left;
- }
- },
value: function() {
return value;
},
+ currentThumbValue: function() {
+ if($currThumb.hasClass('second'))
+ return module.secondThumbVal;
+ return module.thumbVal;
+ },
+ thumbValue: function(which) {
+ switch(which) {
+ case 'first':
+ return module.thumbVal;
+ case 'second':
+ if(module.is.doubled())
+ return module.secondThumbVal;
+ else {
+ module.error(error.notdouble);
+ break;
+ }
+ default:
+ return module.thumbVal;
+ }
+ },
multiplier: function() {
return settings.pageMultiplier;
- }
+ },
+ thumbPosition: function(which) {
+ switch(which) {
+ case 'first':
+ return position;
+ case 'second':
+ if(module.is.doubled())
+ return secondThumbPosition;
+ else {
+ module.error(error.notdouble);
+ break;
+ }
+ default:
+ return position;
+ }
+ },
},
determine: {
pos: function(pagePos) {
return module.is.reversed() ? module.get.trackStartPos() - pagePos + module.get.trackOffset() : pagePos - module.get.trackOffset() - module.get.trackStartPos();
},
+ closestThumb: function(eventPos) {
+ var
+ thumbPos = parseFloat(module.determine.thumbPos($thumb)),
+ thumbDelta = Math.abs(eventPos - thumbPos),
+ secondThumbPos = parseFloat(module.determine.thumbPos($secondThumb)),
+ secondThumbDelta = Math.abs(eventPos - secondThumbPos)
+ ;
+ return thumbDelta <= secondThumbDelta ? $thumb : $secondThumb;
+ },
+ closestThumbPos: function(eventPos) {
+ var
+ thumbPos = parseFloat(module.determine.thumbPos($thumb)),
+ thumbDelta = Math.abs(eventPos - thumbPos),
+ secondThumbPos = parseFloat(module.determine.thumbPos($secondThumb)),
+ secondThumbDelta = Math.abs(eventPos - secondThumbPos)
+ ;
+ return thumbDelta <= secondThumbDelta ? thumbPos : secondThumbPos;
+ },
+ thumbPos: function($element) {
+ var pos =
+ module.is.vertical()
+ ?
+ module.is.reversed() ? $element.css('bottom') : $element.css('top')
+ :
+ module.is.reversed() ? $element.css('right') : $element.css('left')
+ ;
+ return pos;
+ },
positionFromValue: function(value) {
var
min = module.get.min(),
max = module.get.max(),
trackLength = module.get.trackLength(),
ratio = (value - min) / (max - min),
- trackPos = module.get.trackPos(),
- position = Math.round(ratio * trackLength) + trackPos
+ position = Math.round(ratio * trackLength)
;
module.verbose('Determined position: ' + position + ' from value: ' + value);
return position;
@@ -471,9 +549,8 @@ $.fn.range = function(parameters) {
positionFromRatio: function(ratio) {
var
trackLength = module.get.trackLength(),
- trackPos = module.get.trackPos(),
step = module.get.step(),
- position = Math.round(ratio * trackLength) + trackPos,
+ position = Math.round(ratio * trackLength),
adjustedPos = (step == 0) ? position : Math.round(position / step) * step
;
return adjustedPos;
@@ -548,91 +625,126 @@ $.fn.range = function(parameters) {
}
},
+ handleNewValuePosition: function(val) {
+ var
+ min = module.get.min(),
+ max = module.get.max(),
+ newPos
+ ;
+ if(val >= min && val <= max) {
+ newPos = module.determine.positionFromValue(val);
+ } else if (val <= min) {
+ newPos = module.determine.positionFromValue(min);
+ val = min;
+ } else {
+ newPos = module.determine.positionFromValue(max);
+ val = max;
+ }
+ return newPos;
+ },
+
set: {
value: function(newValue) {
- if(input) {
- $(input).val(newValue);
- }
- value = newValue;
- settings.onChange.call(element, newValue);
- module.debug('Setting range value to ' + newValue);
+ module.update.value(newValue, function(value) {
+ settings.onChange.call(element, value);
+ });
},
- position: function(value) {
- if (module.is.vertical()) {
- if (module.is.reversed())
- $thumb.css({bottom: String(value - offset) + 'px'});
- else
- $thumb.css({top: String(value - offset) + 'px'});
- $trackFill.css({height: String(value) + 'px'});
+ valueDouble: function(first, second) {
+ if(module.is.doubled()) {
+ module.thumbVal = first;
+ module.secondThumbVal = second;
+ position = module.handleNewValuePosition(module.thumbVal);
+ module.set.position(position, $thumb)
+ secondPos = module.handleNewValuePosition(module.secondThumbVal);
+ module.set.position(secondPos, $secondThumb);
+ value = Math.abs(module.thumbVal - module.secondThumbVal);
} else {
- if (module.is.reversed())
- $thumb.css({right: String(value - offset) + 'px'});
- else
- $thumb.css({left: String(value - offset) + 'px'});
- $trackFill.css({width: String(value) + 'px'});
+ module.error(error.notdouble);
}
- position = value;
- module.debug('Setting range position to ' + value);
},
- positionBasedValue: function(value) {
- var
- min = module.get.min(),
- max = module.get.max(),
- position
- ;
- if(value >= min && value <= max) {
- position = module.determine.positionFromValue(value);
- } else if (value <= min) {
- position = module.determine.positionFromValue(min);
- value = min;
+ position: function(newPos, $element) {
+ var $targetThumb = $element != undefined ? $element : $currThumb;
+ if(module.is.doubled()) {
+ if(!$targetThumb.hasClass('second'))
+ position = newPos;
+ else
+ secondPos = newPos;
} else {
- position = module.determine.positionFromValue(max);
- value = max;
+ position = newPos;
}
- module.set.position(position);
- module.set.value(value);
- },
- valueMoveToValueBasedPosition: function(position) {
var
- value = module.determine.value(position),
- min = module.get.min(),
- max = module.get.max(),
- pos
+ bottomThumbValue,
+ trackPosValue,
+ trackFillWidth = module.is.doubled() ? Math.abs(position - secondPos) : newPos
;
- if (value <= min) {
- value = min;
- } else if (value >= max){
- value = max;
+ if (module.is.vertical()) {
+ if (module.is.reversed()) {
+ $targetThumb.css({bottom: String(newPos - offset) + 'px'});
+ if(module.is.doubled())
+ trackPosValue = {bottom: String(parseFloat(module.determine.closestThumbPos(0)) + offset) + 'px'};
+ }
+ else {
+ $targetThumb.css({top: String(newPos - offset) + 'px'});
+ if(module.is.doubled())
+ trackPosValue = {top: String(parseFloat(module.determine.closestThumbPos(0)) + offset) + 'px'};
+ }
+ $trackFill.css(Object.assign({height: String(trackFillWidth) + 'px'}, trackPosValue));
+ } else {
+ if (module.is.reversed()) {
+ $targetThumb.css({right: String(newPos - offset) + 'px'});
+ if(module.is.doubled())
+ trackPosValue = {right: String(parseFloat(module.determine.closestThumbPos(0)) + offset) + 'px'};
+ }
+ else {
+ $targetThumb.css({left: String(newPos - offset) + 'px'});
+ if(module.is.doubled())
+ trackPosValue = {left: String(parseFloat(module.determine.closestThumbPos(0)) + offset) + 'px'};
+ }
+ $trackFill.css(Object.assign({width: String(trackFillWidth) + 'px'}, trackPosValue));
}
- pos = module.determine.positionFromValue(value);
- module.set.value(value);
- module.set.position(pos);
+ module.debug('Setting range position to ' + newPos);
},
- valueBasedPosition: function(position) {
+ },
+
+ update: {
+ value: function(newValue, callback) {
var
- value = module.determine.value(position),
min = module.get.min(),
max = module.get.max()
;
- if(value >= min && value <= max) {
+ if (newValue <= min) {
+ newValue = min;
+ } else if(newValue >= max){
+ newValue = max;
+ }
+ if(!module.is.doubled()) {
+ position = module.handleNewValuePosition(newValue);
module.set.position(position);
- } else if (value <= min) {
- module.goto.min();
- value = min;
+ value = newValue;
+ module.thumbVal = value;
} else {
- module.goto.max();
- value = max;
+ var newPos = module.handleNewValuePosition(newValue);
+ if(!$currThumb.hasClass('second')) {
+ module.thumbVal = newValue;
+ }
+ else {
+ module.secondThumbVal = newValue;
+ }
+ module.set.position(newPos);
+ value = Math.abs(module.thumbVal - module.secondThumbVal);
}
- module.set.value(value);
- },
+ module.debug('Setting range value to ' + value);
+ if(typeof callback === 'function')
+ callback(value);
+ }
},
goto: {
max: function() {
- module.set.positionBasedValue(module.get.max());
+ module.set.value(module.get.max());
},
min: function() {
- module.set.positionBasedValue(module.get.min());
+ module.set.value(module.get.min());
},
},
@@ -640,19 +752,29 @@ $.fn.range = function(parameters) {
metadata: function() {
var
data = {
- value : $module.data(metadata.value)
+ thumbVal : $module.data(metadata.thumbVal),
+ secondThumbVal : $module.data(metadata.secondThumbVal),
}
;
- if(data.value) {
- module.debug('Current value set from metadata', data.value);
- module.set.value(data.value);
- module.set.positionBasedValue(data.value);
+ if(data.thumbVal) {
+ if(module.is.doubled() && data.secondThumbVal) {
+ module.debug('Current value set from metadata', data.thumbVal, data.secondThumbVal);
+ module.set.valueDouble(data.thumbVal, data.secondThumbVal);
+ } else {
+ module.debug('Current value set from metadata', data.thumbVal);
+ module.update.value(data.thumbVal);
+ }
}
},
settings: function() {
if(settings.start !== false) {
- module.debug('Start position set from settings', settings.start);
- module.set.positionBasedValue(settings.start);
+ if(module.is.doubled()) {
+ module.debug('Start position set from settings', settings.start, settings.doubleStart);
+ module.set.valueDouble(settings.start, settings.doubleStart);
+ } else {
+ module.debug('Start position set from settings', settings.start);
+ module.update.value(settings.start);
+ }
}
}
},
@@ -855,18 +977,20 @@ $.fn.range.settings = {
namespace : 'range',
error : {
- method : 'The method you called is not defined.',
+ method : 'The method you called is not defined.',
+ notdouble : 'This slider is not a double slider'
},
metadata: {
- value : 'value'
+ thumbVal : 'thumbVal',
+ secondThumbVal : 'secondThumbVal',
},
min : 0,
max : 20,
step : 1,
start : 0,
- input : false,
+ doubleStart : 1,
labelType : 'number',
//the decimal place to round to if step is undefined
@@ -879,7 +1003,8 @@ $.fn.range.settings = {
reversed : 'reversed',
disabled : 'disabled',
labeled : 'labeled',
- vertical : 'vertical'
+ vertical : 'vertical',
+ doubled : 'double',
},
keys : {