Skip to content

I
i20rzslider
Commit 82f406b0 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Merge pull request #264 from angular-slider/feature/show-ticks-at 

feat(ticks): Accept numbers for showTicks/showTicksValues
parents 80ae07c6 76f1ef54
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 279 additions and 34 deletions
demo/demo.js
View file @ 82f406b0
...@@ -237,6 +237,26 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -237,6 +237,26 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Slider with ticks at intermediate positions
$scope.slider_ticks_at = {
value: 500,
options: {
ceil: 1000,
floor: 0,
showTicks: 100
}
};
//Slider with ticks and values at intermediate positions
$scope.slider_ticks_values_at = {
value: 500,
options: {
ceil: 1000,
floor: 0,
showTicksValues: 100
}
};
//Slider with draggable range //Slider with draggable range
$scope.slider_draggable_range = { $scope.slider_draggable_range = {
minValue: 1, minValue: 1,
......
demo/index.html
View file @ 82f406b0
...@@ -181,6 +181,22 @@ ...@@ -181,6 +181,22 @@
></rzslider> ></rzslider>
</article> </article>
<article>
<h2>Slider with ticks at intermediate positions</h2>
<rzslider
rz-slider-model="slider_ticks_at.value"
rz-slider-options="slider_ticks_at.options"
></rzslider>
</article>
<article>
<h2>Slider with ticks and values at intermediate positions</h2>
<rzslider
rz-slider-model="slider_ticks_values_at.value"
rz-slider-options="slider_ticks_values_at.options"
></rzslider>
</article>
<article> <article>
<h2>Slider with draggable range</h2> <h2>Slider with draggable range</h2>
<rzslider <rzslider
......
dist/rzslider.css
View file @ 82f406b0
...@@ -159,6 +159,11 @@ rzslider .rz-ticks .rz-tick .rz-tick-value { ...@@ -159,6 +159,11 @@ rzslider .rz-ticks .rz-tick .rz-tick-value {
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
top: initial;
bottom: -40px;
}
rzslider.rz-vertical { rzslider.rz-vertical {
position: relative; position: relative;
width: 4px; width: 4px;
...@@ -224,7 +229,13 @@ rzslider.rz-vertical .rz-ticks .rz-tick { ...@@ -224,7 +229,13 @@ rzslider.rz-vertical .rz-ticks .rz-tick {
} }
rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value { rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
top: auto; top: initial;
left: 22px; left: 22px;
transform: translate(0, -28%); transform: translate(0, -28%);
}
rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
right: 12px;
bottom: initial;
left: initial;
} }
\ No newline at end of file
dist/rzslider.js
View file @ 82f406b0
/*! angularjs-slider - v2.11.0 - /*! angularjs-slider - v2.11.0 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider - https://github.com/angular-slider/angularjs-slider -
2016-04-01 */ 2016-04-22 */
/*jslint unparam: true */ /*jslint unparam: true */
/*global angular: false, console: false, define, module */ /*global angular: false, console: false, define, module */
(function(root, factory) { (function(root, factory) {
...@@ -247,6 +247,14 @@ ...@@ -247,6 +247,14 @@
*/ */
this.valueRange = 0; this.valueRange = 0;
/**
* If showTicks/showTicksValues options are number.
* In this case, ticks values should be displayed below the slider.
* @type {boolean}
*/
this.intermediateTicks = false;
/** /**
* Set to true if init method already executed * Set to true if init method already executed
* *
...@@ -416,6 +424,8 @@ ...@@ -416,6 +424,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues; this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template this.scope.showTicks = this.options.showTicks; //scope is used in the template
if(angular.isNumber(this.options.showTicks))
this.intermediateTicks = true;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null; || this.options.showSelectionBarFromValue !== null;
...@@ -530,11 +540,14 @@ ...@@ -530,11 +540,14 @@
else else
this.maxH.css('display', ''); this.maxH.css('display', '');
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels); this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels); this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels); var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels); this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar); this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (this.options.vertical) if (this.options.vertical)
...@@ -544,6 +557,9 @@ ...@@ -544,6 +557,9 @@
this.selBar.addClass('rz-draggable'); this.selBar.addClass('rz-draggable');
else else
this.selBar.removeClass('rz-draggable'); this.selBar.removeClass('rz-draggable');
if(this.intermediateTicks && this.options.showTicksValues)
this.ticks.addClass('rz-ticks-values-under');
}, },
alwaysHide: function(el, hide) { alwaysHide: function(el, hide) {
...@@ -751,12 +767,13 @@ ...@@ -751,12 +767,13 @@
*/ */
updateTicksScale: function() { updateTicksScale: function() {
if (!this.options.showTicks) return; if (!this.options.showTicks) return;
var step = this.step;
var positions = '', if(this.intermediateTicks)
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1; step = this.options.showTicks;
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
this.scope.ticks = []; this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) { for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step); var value = this.roundStep(this.minValue + i * step);
var tick = { var tick = {
selected: this.isTickSelected(value) selected: this.isTickSelected(value)
}; };
...@@ -1077,6 +1094,7 @@ ...@@ -1077,6 +1094,7 @@
/** /**
* Return the translated value if a translate function is provided else the original value * Return the translated value if a translate function is provided else the original value
* @param value * @param value
* @param which if it's min or max handle
* @returns {*} * @returns {*}
*/ */
getDisplayValue: function(value, which) { getDisplayValue: function(value, which) {
...@@ -1087,11 +1105,13 @@ ...@@ -1087,11 +1105,13 @@
* Round value to step and precision based on minValue * Round value to step and precision based on minValue
* *
* @param {number} value * @param {number} value
* @param {number} customStep a custom step to override the defined step
* @returns {number} * @returns {number}
*/ */
roundStep: function(value) { roundStep: function(value, customStep) {
var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12); var step = customStep ? customStep : this.step,
steppedDifference = Math.round(steppedDifference) * this.step; steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
steppedDifference = Math.round(+steppedDifference) * step;
var newValue = (this.minValue + steppedDifference).toFixed(this.precision); var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
return +newValue; return +newValue;
}, },
...@@ -1334,7 +1354,7 @@ ...@@ -1334,7 +1354,7 @@
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null)); this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar)); this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null)); this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks)); this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
} }
} }
...@@ -1354,7 +1374,7 @@ ...@@ -1354,7 +1374,7 @@
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null)); this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar)); this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null)); this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks)); this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
} }
} }
...@@ -1423,9 +1443,10 @@ ...@@ -1423,9 +1443,10 @@
* *
* @param {jqLite} pointer * @param {jqLite} pointer
* @param {Event} event The event * @param {Event} event The event
* @param {boolean} fromTick if the event occured on a tick or not
* @returns {undefined} * @returns {undefined}
*/ */
onMove: function(pointer, event) { onMove: function(pointer, event, fromTick) {
var newOffset = this.getEventPosition(event), var newOffset = this.getEventPosition(event),
newValue, newValue,
ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue, ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
...@@ -1437,7 +1458,10 @@ ...@@ -1437,7 +1458,10 @@
newValue = ceilValue; newValue = ceilValue;
} else { } else {
newValue = this.offsetToValue(newOffset); newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue); if(fromTick && angular.isNumber(this.options.showTicks))
newValue = this.roundStep(newValue, this.options.showTicks);
else
newValue = this.roundStep(newValue);
} }
this.positionTrackingHandle(newValue); this.positionTrackingHandle(newValue);
}, },
...@@ -1464,6 +1488,10 @@ ...@@ -1464,6 +1488,10 @@
this.callOnEnd(); this.callOnEnd();
}, },
onTickClick: function(pointer, event) {
this.onMove(pointer, event, true);
},
onPointerFocus: function(pointer, ref) { onPointerFocus: function(pointer, ref) {
this.tracking = ref; this.tracking = ref;
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer)); pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
......
dist/rzslider.min.css
View file @ 82f406b0
/*! angularjs-slider - v2.11.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-04-01 */ /*! angularjs-slider - v2.11.0 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-04-01 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:auto;left:22px;transform:translate(0,-28%)} rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-40px}rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.rz-vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;transform:translate(0,-28%)}rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 82f406b0
This diff is collapsed.
src/rzslider.js
View file @ 82f406b0
...@@ -251,6 +251,14 @@ ...@@ -251,6 +251,14 @@
*/ */
this.valueRange = 0; this.valueRange = 0;
/**
* If showTicks/showTicksValues options are number.
* In this case, ticks values should be displayed below the slider.
* @type {boolean}
*/
this.intermediateTicks = false;
/** /**
* Set to true if init method already executed * Set to true if init method already executed
* *
...@@ -420,6 +428,8 @@ ...@@ -420,6 +428,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues; this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template this.scope.showTicks = this.options.showTicks; //scope is used in the template
if(angular.isNumber(this.options.showTicks))
this.intermediateTicks = true;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null; || this.options.showSelectionBarFromValue !== null;
...@@ -534,11 +544,14 @@ ...@@ -534,11 +544,14 @@
else else
this.maxH.css('display', ''); this.maxH.css('display', '');
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels); this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels); this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels); var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels); this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar); this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
if (this.options.vertical) if (this.options.vertical)
...@@ -548,6 +561,9 @@ ...@@ -548,6 +561,9 @@
this.selBar.addClass('rz-draggable'); this.selBar.addClass('rz-draggable');
else else
this.selBar.removeClass('rz-draggable'); this.selBar.removeClass('rz-draggable');
if(this.intermediateTicks && this.options.showTicksValues)
this.ticks.addClass('rz-ticks-values-under');
}, },
alwaysHide: function(el, hide) { alwaysHide: function(el, hide) {
...@@ -755,12 +771,13 @@ ...@@ -755,12 +771,13 @@
*/ */
updateTicksScale: function() { updateTicksScale: function() {
if (!this.options.showTicks) return; if (!this.options.showTicks) return;
var step = this.step;
var positions = '', if(this.intermediateTicks)
ticksCount = Math.round((this.maxValue - this.minValue) / this.step) + 1; step = this.options.showTicks;
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
this.scope.ticks = []; this.scope.ticks = [];
for (var i = 0; i < ticksCount; i++) { for (var i = 0; i < ticksCount; i++) {
var value = this.roundStep(this.minValue + i * this.step); var value = this.roundStep(this.minValue + i * step);
var tick = { var tick = {
selected: this.isTickSelected(value) selected: this.isTickSelected(value)
}; };
...@@ -1081,6 +1098,7 @@ ...@@ -1081,6 +1098,7 @@
/** /**
* Return the translated value if a translate function is provided else the original value * Return the translated value if a translate function is provided else the original value
* @param value * @param value
* @param which if it's min or max handle
* @returns {*} * @returns {*}
*/ */
getDisplayValue: function(value, which) { getDisplayValue: function(value, which) {
...@@ -1091,11 +1109,13 @@ ...@@ -1091,11 +1109,13 @@
* Round value to step and precision based on minValue * Round value to step and precision based on minValue
* *
* @param {number} value * @param {number} value
* @param {number} customStep a custom step to override the defined step
* @returns {number} * @returns {number}
*/ */
roundStep: function(value) { roundStep: function(value, customStep) {
var steppedDifference = parseFloat((value - this.minValue) / this.step).toPrecision(12); var step = customStep ? customStep : this.step,
steppedDifference = Math.round(steppedDifference) * this.step; steppedDifference = parseFloat((value - this.minValue) / step).toPrecision(12);
steppedDifference = Math.round(+steppedDifference) * step;
var newValue = (this.minValue + steppedDifference).toFixed(this.precision); var newValue = (this.minValue + steppedDifference).toFixed(this.precision);
return +newValue; return +newValue;
}, },
...@@ -1338,7 +1358,7 @@ ...@@ -1338,7 +1358,7 @@
this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null)); this.fullBar.on('mousedown', angular.bind(this, this.onStart, null, null));
this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar)); this.fullBar.on('mousedown', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null)); this.ticks.on('mousedown', angular.bind(this, this.onStart, null, null));
this.ticks.on('mousedown', angular.bind(this, this.onMove, this.ticks)); this.ticks.on('mousedown', angular.bind(this, this.onTickClick, this.ticks));
} }
} }
...@@ -1358,7 +1378,7 @@ ...@@ -1358,7 +1378,7 @@
this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null)); this.fullBar.on('touchstart', angular.bind(this, this.onStart, null, null));
this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar)); this.fullBar.on('touchstart', angular.bind(this, this.onMove, this.fullBar));
this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null)); this.ticks.on('touchstart', angular.bind(this, this.onStart, null, null));
this.ticks.on('touchstart', angular.bind(this, this.onMove, this.ticks)); this.ticks.on('touchstart', angular.bind(this, this.onTickClick, this.ticks));
} }
} }
...@@ -1427,9 +1447,10 @@ ...@@ -1427,9 +1447,10 @@
* *
* @param {jqLite} pointer * @param {jqLite} pointer
* @param {Event} event The event * @param {Event} event The event
* @param {boolean} fromTick if the event occured on a tick or not
* @returns {undefined} * @returns {undefined}
*/ */
onMove: function(pointer, event) { onMove: function(pointer, event, fromTick) {
var newOffset = this.getEventPosition(event), var newOffset = this.getEventPosition(event),
newValue, newValue,
ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue, ceilValue = this.options.rightToLeft ? this.minValue : this.maxValue,
...@@ -1441,7 +1462,10 @@ ...@@ -1441,7 +1462,10 @@
newValue = ceilValue; newValue = ceilValue;
} else { } else {
newValue = this.offsetToValue(newOffset); newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue); if(fromTick && angular.isNumber(this.options.showTicks))
newValue = this.roundStep(newValue, this.options.showTicks);
else
newValue = this.roundStep(newValue);
} }
this.positionTrackingHandle(newValue); this.positionTrackingHandle(newValue);
}, },
...@@ -1468,6 +1492,10 @@ ...@@ -1468,6 +1492,10 @@
this.callOnEnd(); this.callOnEnd();
}, },
onTickClick: function(pointer, event) {
this.onMove(pointer, event, true);
},
onPointerFocus: function(pointer, ref) { onPointerFocus: function(pointer, ref) {
this.tracking = ref; this.tracking = ref;
pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer)); pointer.one('blur', angular.bind(this, this.onPointerBlur, pointer));
......
src/rzslider.less
View file @ 82f406b0
...@@ -149,6 +149,13 @@ rzslider { ...@@ -149,6 +149,13 @@ rzslider {
transform: translate(-50%, 0); transform: translate(-50%, 0);
} }
} }
&.rz-ticks-values-under {
.rz-tick-value {
top: initial;
bottom: @ticksValuePosition - 10;
}
}
} }
&.rz-vertical { &.rz-vertical {
...@@ -212,10 +219,18 @@ rzslider { ...@@ -212,10 +219,18 @@ rzslider {
vertical-align: middle; vertical-align: middle;
.rz-tick-value { .rz-tick-value {
left: @ticksValuePositionOnVertical; left: @ticksValuePositionOnVertical;
top: auto; top: initial;
transform: translate(0, -28%); transform: translate(0, -28%);
} }
} }
&.rz-ticks-values-under {
.rz-tick-value {
bottom: initial;
left: initial;
right: @ticksValuePositionOnVertical - 10;
}
}
} }
} }
} }
tests/specs/mouse-controls/single-slider-horizontal-test.js
View file @ 82f406b0
...@@ -183,6 +183,26 @@ ...@@ -183,6 +183,26 @@
helper.slider.callOnStart.called.should.be.true; helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true; helper.slider.callOnChange.called.should.be.true;
}); });
it('should handle click on ticks when showTicks is an integer and move minH', function () {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousedown(helper.slider.ticks, offset);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
}); });
describe('Right to left Mouse controls - Single Horizontal', function() { describe('Right to left Mouse controls - Single Horizontal', function() {
...@@ -368,6 +388,25 @@ ...@@ -368,6 +388,25 @@
helper.slider.callOnChange.called.should.be.true; helper.slider.callOnChange.called.should.be.true;
}); });
it('should handle click on ticks when showTicks is an integer and move minH', function() {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
helper.fireMousedown(helper.slider.ticks, offset);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
}); });
}()); }());
tests/specs/mouse-controls/single-slider-vertical-test.js
View file @ 82f406b0
...@@ -186,6 +186,26 @@ ...@@ -186,6 +186,26 @@
helper.slider.callOnStart.called.should.be.true; helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true; helper.slider.callOnChange.called.should.be.true;
}); });
it('should handle click on ticks when showTicks is an integer and move minH', function() {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousedown(helper.slider.ticks, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
}); });
describe('Right to left Mouse controls - Single Vertical', function() { describe('Right to left Mouse controls - Single Vertical', function() {
...@@ -374,6 +394,26 @@ ...@@ -374,6 +394,26 @@
helper.slider.callOnStart.called.should.be.true; helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true; helper.slider.callOnChange.called.should.be.true;
}); });
it('should handle click on ticks when showTicks is an integer and move minH', function() {
helper.scope.slider.options.step = 1;
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
sinon.spy(helper.slider, 'positionTrackingHandle');
sinon.spy(helper.slider, 'callOnStart');
sinon.spy(helper.slider, 'callOnChange');
var expectedValue = 10,
offset = helper.slider.sliderElem.rzsp - helper.slider.valueToOffset(expectedValue) - helper.slider.handleHalfDim;
helper.fireMousedown(helper.slider.ticks, offset, true);
expect(helper.scope.slider.value).to.equal(expectedValue);
expect(helper.slider.tracking).to.equal('rzSliderModel');
helper.slider.positionTrackingHandle.called.should.be.true;
helper.slider.callOnStart.called.should.be.true;
helper.slider.callOnChange.called.should.be.true;
});
}); });
}()); }());
......
tests/specs/options-handling-test.js
View file @ 82f406b0
...@@ -660,6 +660,18 @@ ...@@ -660,6 +660,18 @@
expect(helper.slider.scope.showTicks).to.be.true; expect(helper.slider.scope.showTicks).to.be.true;
}); });
it('should set the intermediateTicks flag to true when showTicks is an integer', function() {
helper.scope.slider.options.showTicks = 10;
helper.scope.$digest();
expect(helper.slider.intermediateTicks).to.be.true;
});
it('should set the intermediateTicks flag to true when showTicksValues is an integer', function() {
helper.scope.slider.options.showTicksValues = 10;
helper.scope.$digest();
expect(helper.slider.intermediateTicks).to.be.true;
});
it('should set not accept draggableRange to true when slider is a single one', function() { it('should set not accept draggableRange to true when slider is a single one', function() {
helper.scope.slider.options.draggableRange = true; helper.scope.slider.options.draggableRange = true;
helper.scope.$digest(); helper.scope.$digest();
......
tests/specs/ticks-test.js
View file @ 82f406b0
...@@ -47,6 +47,20 @@ ...@@ -47,6 +47,20 @@
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11); expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11);
}); });
it('should create the correct number of ticks when showTicks is an integer', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: 20
}
};
helper.createSlider(sliderConf);
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(6);
});
it('should create the correct number of ticks when showTicksValues is true', function() { it('should create the correct number of ticks when showTicksValues is true', function() {
var sliderConf = { var sliderConf = {
value: 50, value: 50,
...@@ -66,6 +80,28 @@ ...@@ -66,6 +80,28 @@
expect(secondTick.text()).to.equal('10'); expect(secondTick.text()).to.equal('10');
}); });
it('should create the correct number of ticks when showTicksValues is an integer', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicksValues: 20
}
};
helper.createSlider(sliderConf);
expect(helper.slider.ticks.hasClass('rz-ticks-values-under')).to.be.true;
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(6);
expect(helper.element[0].querySelectorAll('.rz-tick-value')).to.have.length(6);
var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[0]);
expect(firstTick.text()).to.equal('0');
var secondTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[1]);
expect(secondTick.text()).to.equal('20');
var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick-value')[5]);
expect(lastTick.text()).to.equal('100');
});
it('should set rz-selected class to ticks below the model value if showSelectionBar is true', function() { it('should set rz-selected class to ticks below the model value if showSelectionBar is true', function() {
var sliderConf = { var sliderConf = {
value: 50, value: 50,
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment