diff --git a/src/definitions/modules/range.js b/src/definitions/modules/range.js
index 689b09051..08ac21170 100644
--- a/src/definitions/modules/range.js
+++ b/src/definitions/modules/range.js
@@ -68,7 +68,7 @@ $.fn.range = function(parameters) {
initialize: function() {
module.debug('Initializing range slider', settings);
- isTouch = module.get.isTouch();
+ isTouch = module.is.touch();
module.setup.layout();
if(!module.is.disabled())
module.bind.events();
@@ -133,8 +133,15 @@ $.fn.range = function(parameters) {
else
$labels = $module.append('').find('.labels');
for(var i = 0; i <= module.get.numLabels(); i++) {
- var $label = $('' + module.get.label(i+1) + '');
- $label.css(module.is.reversed() ? 'right' : 'left', module.determine.positionFromValue((i+1) * module.get.step()));
+ var
+ $label = $('' + module.get.label(i+1) + ''),
+ position = module.is.vertical()
+ ?
+ module.is.reversed() ? 'bottom' : 'top'
+ :
+ module.is.reversed() ? 'right' : 'left'
+ ;
+ $label.css(position, module.determine.positionFromValue((i+1) * module.get.step()));
$labels.append($label);
}
}
@@ -151,7 +158,7 @@ $.fn.range = function(parameters) {
module.event.down(event);
});
$module.on('mousedown' + eventNamespace, module.event.down);
- if(module.get.isTouch()) {
+ if(module.is.touch()) {
$module.find('.track, .thumb, .inner').on('touchstart' + eventNamespace, function(event) {
event.stopImmediatePropagation();
event.preventDefault();
@@ -162,7 +169,7 @@ $.fn.range = function(parameters) {
}
},
documentEvents: function() {
- if(module.get.isTouch()) {
+ if(module.is.touch()) {
$(document).on('touchmove' + eventNamespace, module.event.move);
$(document).on('touchend' + eventNamespace, module.event.up);
}
@@ -181,7 +188,7 @@ $.fn.range = function(parameters) {
$module.off('touchstart' + eventNamespace);
},
documentEvents: function() {
- if(module.get.isTouch()) {
+ if(module.is.touch()) {
$(document).off('touchmove' + eventNamespace);
$(document).off('touchend' + eventNamespace);
}
@@ -201,20 +208,20 @@ $.fn.range = function(parameters) {
move: function(event, originalEvent) {
event.preventDefault();
var
- pageX = module.determine.eventXPos(event, originalEvent),
- newPos = module.determine.pos(pageX)
+ eventPos = module.determine.eventPos(event, originalEvent),
+ newPos = module.determine.pos(eventPos)
;
- if (pageX >= module.get.trackOffset() && pageX <= module.get.trackOffset() + module.get.trackWidth()) {
+ if (eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
module.set.valueBasedPosition(newPos);
}
},
up: function(event, originalEvent) {
event.preventDefault();
var
- pageX = module.determine.eventXPos(event, originalEvent),
- newPos = module.determine.pos(pageX)
+ eventPos = module.determine.eventPos(event, originalEvent),
+ newPos = module.determine.pos(eventPos)
;
- if(pageX >= module.get.trackOffset() && pageX <= module.get.trackOffset() + module.get.trackWidth()) {
+ if(eventPos >= module.get.trackOffset() && eventPos <= module.get.trackOffset() + module.get.trackLength()) {
module.set.valueMoveToValueBasedPosition(newPos);
}
module.unbind.documentEvents();
@@ -230,32 +237,48 @@ $.fn.range = function(parameters) {
},
reversed: function() {
return $module.hasClass(settings.className.reversed);
- }
- },
-
- get: {
- isTouch: function () {
- try {
+ },
+ vertical: function() {
+ return $module.hasClass(settings.className.vertical);
+ },
+ touch: function () {
+ try {
document.createEvent('TouchEvent');
return true;
- } catch (e) {
+ } catch (e) {
return false;
- }
- },
+ }
+ },
+ },
+
+ get: {
+
trackOffset: function() {
- return $track.offset().left;
+ if (module.is.vertical()) {
+ return $track.offset().top;
+ } else {
+ return $track.offset().left;
+ }
},
- trackWidth: function() {
- return $track.width();
+ trackLength: function() {
+ if (module.is.vertical()) {
+ return $track.height();
+ } else {
+ return $track.width();
+ }
},
trackLeft: function() {
- return $track.position().left;
+ if (module.is.vertical()) {
+ return $track.position().top;
+ } else {
+ return $track.position().left;
+ }
},
trackStartPos: function() {
- return module.is.reversed() ? module.get.trackLeft() + module.get.trackWidth() : module.get.trackLeft();
+ return module.is.reversed() ? module.get.trackLeft() + module.get.trackLength() : module.get.trackLeft();
},
trackEndPos: function() {
- return module.is.reversed() ? module.get.trackLeft() : module.get.trackLeft() + module.get.trackWidth();
+ return module.is.reversed() ? module.get.trackLeft() : module.get.trackLeft() + module.get.trackLength();
},
precision: function() {
var
@@ -304,12 +327,13 @@ $.fn.range = function(parameters) {
default:
return value;
}
- }
- },
-
- determine: {
- pos: function(pagePos) {
- return module.is.reversed() ? module.get.trackStartPos() - pagePos + module.get.trackOffset() : pagePos - module.get.trackOffset() - module.get.trackStartPos();
+ },
+ 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(position) {
var
@@ -328,31 +352,41 @@ $.fn.range = function(parameters) {
difference = Math.round(difference * precision) / precision;
module.verbose('Cutting off additional decimal places')
return difference - module.get.min();
+ }
+ },
+
+ determine: {
+ pos: function(pagePos) {
+ return module.is.reversed() ? module.get.trackStartPos() - pagePos + module.get.trackOffset() : pagePos - module.get.trackOffset() - module.get.trackStartPos();
},
positionFromValue: function(value) {
var
min = module.get.min(),
max = module.get.max(),
- trackWidth = module.get.trackWidth(),
+ trackLength = module.get.trackLength(),
ratio = (value - min) / (max - min),
- trackPos = module.is.reversed() ? trackWidth - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left,
- position = Math.round(ratio * trackWidth) + trackPos
+ trackPos = module.get.trackPos(),
+ position = Math.round(ratio * trackLength) + trackPos
;
module.verbose('Determined position: ' + position + ' from value: ' + value);
return position;
},
positionFromRatio: function(ratio) {
var
- trackWidth = module.get.trackWidth(),
- trackPos = module.is.reversed() ? trackWidth - ($trackFill.position().left + $trackFill.width()) : $trackFill.position().left,
+ trackLength = module.get.trackLength(),
+ trackPos = module.get.trackPos(),
step = module.get.step(),
- position = Math.round(ratio * trackWidth) + trackPos,
+ position = Math.round(ratio * trackLength) + trackPos,
adjustedPos = (step == 0) ? position : Math.round(position / step) * step
;
return adjustedPos;
},
- eventXPos: function(event, originalEvent) {
- return isTouch ? originalEvent.originalEvent.touches[0].pageX : (typeof event.pageX != 'undefined') ? event.pageX : originalEvent.pageX
+ eventPos: function(event, originalEvent) {
+ if (module.is.vertical()) {
+ return isTouch ? originalEvent.originalEvent.touches[0].pageY : (typeof event.pageY != 'undefined') ? event.pageY : originalEvent.pageY;
+ } else {
+ return isTouch ? originalEvent.originalEvent.touches[0].pageX : (typeof event.pageX != 'undefined') ? event.pageX : originalEvent.pageX;
+ }
},
},
@@ -365,11 +399,19 @@ $.fn.range = function(parameters) {
module.debug('Setting range value to ' + newValue);
},
position: function(value) {
- 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'});
+ 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'});
+ } 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.position = value;
module.debug('Setting range position to ' + value);
},
@@ -392,7 +434,7 @@ $.fn.range = function(parameters) {
},
valueMoveToValueBasedPosition: function(position) {
var
- value = module.determine.value(position),
+ value = module.get.value(position),
min = module.get.min(),
max = module.get.max(),
pos
@@ -408,7 +450,7 @@ $.fn.range = function(parameters) {
},
valueBasedPosition: function(position) {
var
- value = module.determine.value(position),
+ value = module.get.value(position),
min = module.get.min(),
max = module.get.max()
;
@@ -680,7 +722,8 @@ $.fn.range.settings = {
className : {
reversed : 'reversed',
disabled : 'disabled',
- labeled : 'labeled'
+ labeled : 'labeled',
+ vertical : 'vertical'
},
labelTypes : {
diff --git a/src/definitions/modules/range.less b/src/definitions/modules/range.less
index 85e523833..efc2238d8 100644
--- a/src/definitions/modules/range.less
+++ b/src/definitions/modules/range.less
@@ -7,46 +7,58 @@
@import (multiple) '../../theme.config';
-.ui.range {
+.ui.range:not(.vertical) {
width: 100%;
padding: @padding;
+}
+
+.ui.range {
position: relative;
}
.ui.range .inner {
- height: @height;
position: relative;
z-index: 2;
}
+.ui.range:not(.vertical) .inner {
+ height: @height;
+}
+
.ui.range .inner:hover {
cursor: @hoverPointer;
}
.ui.range .inner .track {
position: absolute;
+ border-radius: @trackBorderRadius;
+ background-color: @trackColor;
+}
+
+.ui.range:not(.vertical) .inner .track {
width: 100%;
height: @trackHeight;
- border-radius: @trackBorderRadius;
top: @trackPositionTop;
left: 0;
- background-color: @trackColor;
}
.ui.range .inner .track-fill {
position: absolute;
+ border-radius: @trackFillBorderRadius;
+ background-color: @trackFillColor;
+}
+
+.ui.range:not(.vertical) .inner .track-fill {
width: 0;
height: @trackFillHeight;
- border-radius: @trackFillBorderRadius;
top: @trackPositionTop;
left: 0;
- background-color: @trackFillColor;
}
.ui.range .inner .thumb {
position: absolute;
- top: 0;
left: 0;
+ top: 0;
height: @thumbHeight;
width: @thumbHeight;
background: @thumbBackground;
@@ -104,6 +116,45 @@
Variations
*******************************/
+/*--------------
+ Vertical
+---------------*/
+
+.ui.range.vertical {
+ height: 100%;
+ padding: @verticalPadding;
+}
+
+.ui.range.vertical .inner {
+ width: @height;
+ height: 100%;
+}
+
+.ui.range.vertical .inner .track {
+ height: 100%;
+ width: @trackHeight;
+ left: @trackPositionTop;
+ top: 0;
+}
+
+.ui.range.vertical .inner .track-fill {
+ height: 0;
+ width: @trackFillHeight;
+ left: @trackPositionTop;
+ top: 0;
+}
+
+/* Vertical Reversed */
+.ui.range.vertical.reversed .inner .thumb {
+ top: auto;
+ bottom: 0;
+}
+
+.ui.range.vertical.reversed .inner .track-fill {
+ top: auto;
+ bottom: 0;
+}
+
/*--------------
Labeled
---------------*/
@@ -115,6 +166,9 @@
padding: 0;
position: absolute;
top: 50%;
+}
+
+.ui.labeled.range:not(.vertical) > .labels {
transform: translateY(-50%);
}
@@ -134,6 +188,27 @@
left: 50%;
}
+/* Vertical Labels */
+
+.ui.labeled.vertical.range > .labels {
+ width: @labelHeight;
+ height: 100%;
+ left: 50%;
+ top: 0;
+ transform: translateX(-50%);
+}
+
+.ui.labeled.vertical.range > .labels .label {
+ transform: translate(-100%, -@labelWidth);
+}
+
+.ui.labeled.vertical.range > .labels .label:after {
+ width: @labelHeight;
+ height: @labelWidth;
+ left: 100%;
+ top: 50%;
+}
+
/*--------------
Hover
---------------*/
@@ -510,53 +585,95 @@
height: @smallHeight;
width: @smallHeight;
}
-.ui.range.small .inner {
+.ui.range.small:not(.vertical) .inner {
height: @smallHeight;
}
-.ui.range.small .inner .track,
-.ui.range.small .inner .track-fill {
+.ui.range.small:not(.vertical) .inner .track,
+.ui.range.small:not(.vertical) .inner .track-fill {
height: @smallTrackHeight;
top: @trackPositionTopSmall;
}
-.ui.small.labeled.range > .labels,
-.ui.small.labeled.range > .labels .label:after {
+.ui.small.labeled.range:not(.vertical) > .labels,
+.ui.small.labeled.range:not(.vertical) > .labels .label:after {
height: @smallLabelHeight;
}
+/* Small Vertical */
+.ui.range.small.vertical .inner {
+ width: @smallHeight;
+}
+.ui.range.small.vertical .inner .track,
+.ui.range.small.vertical .inner .track-fill {
+ width: @smallTrackHeight;
+ left: @trackPositionTopSmall;
+}
+.ui.small.labeled.range.vertical > .labels,
+.ui.small.labeled.range.vertical > .labels .label:after {
+ width: @smallLabelHeight;
+}
+
/* Large */
.ui.range.large .inner .thumb {
height: @largeHeight;
width: @largeHeight;
}
-.ui.range.large .inner {
+.ui.range.large:not(.vertical) .inner {
height: @largeHeight;
}
-.ui.range.large .inner .track,
-.ui.range.large .inner .track-fill {
+.ui.range.large:not(.vertical) .inner .track,
+.ui.range.large:not(.vertical) .inner .track-fill {
height: @largeTrackHeight;
top: @trackPositionTopLarge;
}
-.ui.large.labeled.range > .labels,
-.ui.large.labeled.range > .labels .label:after {
+.ui.large.labeled.range:not(.vertical) > .labels,
+.ui.large.labeled.range:not(.vertical) > .labels .label:after {
height: @largeLabelHeight;
}
+/* Large Vertical */
+.ui.range.large.vertical .inner {
+ width: @largeHeight;
+}
+.ui.range.large.vertical .inner .track,
+.ui.range.large.vertical .inner .track-fill {
+ width: @largeTrackHeight;
+ left: @trackPositionTopLarge;
+}
+.ui.large.labeled.range.vertical > .labels,
+.ui.large.labeled.range.vertical > .labels .label:after {
+ width: @largeLabelHeight;
+}
+
/* Big */
.ui.range.big .inner .thumb {
height: @bigHeight;
width: @bigHeight;
}
-.ui.range.big .inner {
+.ui.range.big:not(.vertical) .inner {
height: @bigHeight;
}
-.ui.range.big .inner .track,
-.ui.range.big .inner .track-fill {
+.ui.range.big:not(.vertical) .inner .track,
+.ui.range.big:not(.vertical) .inner .track-fill {
height: @bigTrackHeight;
top: @trackPositionTopBig;
}
-.ui.big.labeled.range > .labels,
-.ui.big.labeled.range > .labels .label:after {
+.ui.big.labeled.range:not(.vertical) > .labels,
+.ui.big.labeled.range:not(.vertical) > .labels .label:after {
height: @bigLabelHeight;
}
+/* Big Vertical */
+.ui.range.big.vertical .inner {
+ width: @bigHeight;
+}
+.ui.range.big.vertical .inner .track,
+.ui.range.big.vertical .inner .track-fill {
+ width: @bigTrackHeight;
+ left: @trackPositionTopBig;
+}
+.ui.big.labeled.range.vertical > .labels,
+.ui.big.labeled.range.vertical > .labels .label:after {
+ width: @bigLabelHeight;
+}
+
.loadUIOverrides();
diff --git a/src/themes/default/modules/range.variables b/src/themes/default/modules/range.variables
index 42ed53b7c..a5f7ead50 100644
--- a/src/themes/default/modules/range.variables
+++ b/src/themes/default/modules/range.variables
@@ -49,6 +49,9 @@
Variations
--------------------*/
+/* Vertical */
+@verticalPadding : .5em 1em;
+
/* Labeled */
@labelHeight : @height;
@labelWidth : 1px;