Skip to content

I
i20rzslider
Commit 27c8d1b7 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Merge pull request #233 from angular-slider/noSwitching 

feat(range): Add a noSwitching value to prevent switching min/max
parents 5d130f09 46f618fb
Expand all Show whitespace changes
Inline Side-by-side
Showing with 392 additions and 183 deletions
CHANGELOG.md
View file @ 27c8d1b7
# 2.6.0 (not-released)
## Features
- Add a `noSwitching` option to prevent the user from switching the min and max handles (#233).
# 2.5.0 (2016-01-24) # 2.5.0 (2016-01-24)
## Features ## Features
- Add a `minRange` option to set a minimal range (#231). - Add a `minRange` option to set a minimal range (#231).
......
README.md
View file @ 27c8d1b7
...@@ -184,6 +184,7 @@ The default options are: ...@@ -184,6 +184,7 @@ The default options are:
keyboardSupport: true, keyboardSupport: true,
scale: 1, scale: 1,
enforceRange: false, enforceRange: false,
noSwitching: false,
onlyBindHandles: false, onlyBindHandles: false,
onStart: null, onStart: null,
onChange: null, onChange: null,
...@@ -199,7 +200,7 @@ The default options are: ...@@ -199,7 +200,7 @@ The default options are:
**precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this. **precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this.
**minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. **minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. *Applies to range slider only.*
**translate** - _Function(value, sliderId)_: Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers: **translate** - _Function(value, sliderId)_: Custom translate function. Use this if you want to translate values displayed on the slider. For example if you want to display dollar amounts instead of just numbers:
```html ```html
...@@ -226,9 +227,9 @@ $scope.slider = { ...@@ -226,9 +227,9 @@ $scope.slider = {
**stepsArray** - _Array_: If you want to display a slider with non linear/number steps. Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray. **stepsArray** - _Array_: If you want to display a slider with non linear/number steps. Just pass an array with each slider value and that's it; the floor, ceil and step settings of the slider will be computed automatically. The `rz-slider-model` value will be the index of the selected item in the stepsArray.
**draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar. **draggableRange** - _Boolean (defaults to false)_: When set to true and using a range slider, the range can be dragged by the selection bar. *Applies to range slider only.*
**draggableRangeOnly** - _Boolean (defaults to false)_: Same as draggableRange but the slider range can't be changed. **draggableRangeOnly** - _Boolean (defaults to false)_: Same as draggableRange but the slider range can't be changed. *Applies to range slider only.*
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar before the slider handle. **showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar before the slider handle.
...@@ -256,6 +257,8 @@ $scope.slider = { ...@@ -256,6 +257,8 @@ $scope.slider = {
**enforceRange** - _Boolean (defaults to false)_: Set to true to round the `rzSliderModel` and `rzSliderHigh` to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider. **enforceRange** - _Boolean (defaults to false)_: Set to true to round the `rzSliderModel` and `rzSliderHigh` to the slider range even when modified from outside the slider. When set to false, if the model values are modified from outside the slider, they are not rounded but they are still rendered properly on the slider.
**noSwitching** - _Boolean (defaults to false)_: Set to true to prevent to user from switching the min and max handles. *Applies to range slider only.*
**onlyBindHandles** - _Boolean (defaults to false)_: Set to true to only bind events on slider handles. **onlyBindHandles** - _Boolean (defaults to false)_: Set to true to only bind events on slider handles.
**onStart** - _Function(sliderId, modelValue, highValue)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback. This callback is called before any update on the model. **onStart** - _Function(sliderId, modelValue, highValue)_: Function to be called when a slider update is started. If an id was set in the options, then it's passed to this callback. This callback is called before any update on the model.
......
demo/demo.js
View file @ 27c8d1b7
...@@ -29,6 +29,18 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) { ...@@ -29,6 +29,18 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
} }
}; };
//Range slider with noSwitching config
$scope.noSwitchingSlider = {
minValue: 10,
maxValue: 90,
options: {
floor: 0,
ceil: 100,
step: 1,
noSwitching: true
}
};
//Slider with selection bar //Slider with selection bar
$scope.slider_visible_bar = { $scope.slider_visible_bar = {
value: 10, value: 10,
......
demo/index.html
View file @ 27c8d1b7
...@@ -45,6 +45,15 @@ ...@@ -45,6 +45,15 @@
></rzslider> ></rzslider>
</article> </article>
<article>
<h2>Range slider with noSwitching=true</h2>
<rzslider
rz-slider-model="noSwitchingSlider.minValue"
rz-slider-high="noSwitchingSlider.maxValue"
rz-slider-options="noSwitchingSlider.options"
></rzslider>
</article>
<article> <article>
<h2>Slider with visible selection bar</h2> <h2>Slider with visible selection bar</h2>
<rzslider <rzslider
......
dist/rzslider.css
View file @ 27c8d1b7
/*! angularjs-slider - v2.5.0 - /*! angularjs-slider - v2.5.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-01-24 */ 2016-01-31 */
rzslider { rzslider {
position: relative; position: relative;
display: inline-block; display: inline-block;
...@@ -98,6 +98,10 @@ rzslider .rz-pointer:hover:after { ...@@ -98,6 +98,10 @@ rzslider .rz-pointer:hover:after {
background-color: #ffffff; background-color: #ffffff;
} }
rzslider .rz-pointer.rz-active {
z-index: 4;
}
rzslider .rz-pointer.rz-active:after { rzslider .rz-pointer.rz-active:after {
background-color: #451aff; background-color: #451aff;
} }
......
dist/rzslider.js
View file @ 27c8d1b7
...@@ -52,6 +52,7 @@ ...@@ -52,6 +52,7 @@
keyboardSupport: true, keyboardSupport: true,
scale: 1, scale: 1,
enforceRange: false, enforceRange: false,
noSwitching: false,
onlyBindHandles: false, onlyBindHandles: false,
onStart: null, onStart: null,
onChange: null, onChange: null,
...@@ -843,7 +844,7 @@ ...@@ -843,7 +844,7 @@
updateHandles: function(which, newOffset) { updateHandles: function(which, newOffset) {
if (which === 'rzSliderModel') if (which === 'rzSliderModel')
this.updateLowHandle(newOffset); this.updateLowHandle(newOffset);
else if (which === 'rzSliderHigh') else
this.updateHighHandle(newOffset); this.updateHighHandle(newOffset);
this.updateSelectionBar(); this.updateSelectionBar();
...@@ -883,7 +884,7 @@ ...@@ -883,7 +884,7 @@
}, },
/** /**
* Show / hide floor / ceiling label * Show/hide floor/ceiling label
* *
* @returns {undefined} * @returns {undefined}
*/ */
...@@ -1177,8 +1178,15 @@ ...@@ -1177,8 +1178,15 @@
if (!this.range) { if (!this.range) {
return this.minH; return this.minH;
} }
var offset = this.getEventPosition(event); var offset = this.getEventPosition(event),
return Math.abs(offset - this.minH.rzsp) < Math.abs(offset - this.maxH.rzsp) ? this.minH : this.maxH; distanceMin = Math.abs(offset - this.minH.rzsp),
distanceMax = Math.abs(offset - this.maxH.rzsp);
if (distanceMin < distanceMax)
return this.minH;
else if (distanceMin > distanceMax)
return this.maxH;
else //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
return offset < this.minH.rzsp ? this.minH : this.maxH;
}, },
/** /**
...@@ -1322,21 +1330,14 @@ ...@@ -1322,21 +1330,14 @@
newValue; newValue;
if (newOffset <= 0) { if (newOffset <= 0) {
if (pointer.rzsp === 0)
return;
newValue = this.minValue; newValue = this.minValue;
newOffset = 0;
} else if (newOffset >= this.maxPos) { } else if (newOffset >= this.maxPos) {
if (pointer.rzsp === this.maxPos)
return;
newValue = this.maxValue; newValue = this.maxValue;
newOffset = this.maxPos;
} else { } else {
newValue = this.offsetToValue(newOffset); newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue); newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
} }
this.positionTrackingHandle(newValue, newOffset); this.positionTrackingHandle(newValue);
}, },
/** /**
...@@ -1402,36 +1403,28 @@ ...@@ -1402,36 +1403,28 @@
if (action == null || this.tracking === '') return; if (action == null || this.tracking === '') return;
event.preventDefault(); event.preventDefault();
var newValue = this.roundStep(this.sanitizeValue(action)), var newValue = this.roundStep(this.sanitizeValue(action));
newOffset = this.valueToOffset(newValue);
if (!this.options.draggableRangeOnly) { if (!this.options.draggableRangeOnly) {
this.positionTrackingHandle(newValue, newOffset); this.positionTrackingHandle(newValue);
} else { } else {
var difference = this.scope.rzSliderHigh - this.scope.rzSliderModel, var difference = this.scope.rzSliderHigh - this.scope.rzSliderModel,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue; newMinValue, newMaxValue;
if (this.tracking === 'rzSliderModel') { if (this.tracking === 'rzSliderModel') {
newMinValue = newValue; newMinValue = newValue;
newMinOffset = newOffset;
newMaxValue = newValue + difference; newMaxValue = newValue + difference;
if (newMaxValue > this.maxValue) { if (newMaxValue > this.maxValue) {
newMaxValue = this.maxValue; newMaxValue = this.maxValue;
newMinValue = newMaxValue - difference; newMinValue = newMaxValue - difference;
newMinOffset = this.valueToOffset(newMinValue);
} }
newMaxOffset = this.valueToOffset(newMaxValue);
} else { } else {
newMaxValue = newValue; newMaxValue = newValue;
newMaxOffset = newOffset;
newMinValue = newValue - difference; newMinValue = newValue - difference;
if (newMinValue < this.minValue) { if (newMinValue < this.minValue) {
newMinValue = this.minValue; newMinValue = this.minValue;
newMaxValue = newMinValue + difference; newMaxValue = newMinValue + difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} }
newMinOffset = this.valueToOffset(newMinValue);
} }
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset); this.positionTrackingBar(newMinValue, newMaxValue);
} }
}, },
...@@ -1469,32 +1462,25 @@ ...@@ -1469,32 +1462,25 @@
*/ */
onDragMove: function(pointer, event) { onDragMove: function(pointer, event) {
var newOffset = this.getEventPosition(event), var newOffset = this.getEventPosition(event),
newMinOffset, newMaxOffset,
newMinValue, newMaxValue; newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowLimit) { if (newOffset <= this.dragging.lowLimit) {
if (this.minH.rzsp === 0) if (this.minH.rzsp === 0)
return; return;
newMinValue = this.minValue; newMinValue = this.minValue;
newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference; newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxPos - this.dragging.highLimit) { } else if (newOffset >= this.maxPos - this.dragging.highLimit) {
if (this.maxH.rzsp === this.maxPos) if (this.maxH.rzsp === this.maxPos)
return; return;
newMaxValue = this.maxValue; newMaxValue = this.maxValue;
newMaxOffset = this.maxPos;
newMinValue = this.maxValue - this.dragging.difference; newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else { } else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit); newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit);
newMinValue = this.roundStep(newMinValue); newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference; newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} }
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset); this.positionTrackingBar(newMinValue, newMaxValue);
}, },
/** /**
...@@ -1502,14 +1488,12 @@ ...@@ -1502,14 +1488,12 @@
* *
* @param {number} newMinValue the new minimum value * @param {number} newMinValue the new minimum value
* @param {number} newMaxValue the new maximum value * @param {number} newMaxValue the new maximum value
* @param {number} newMinOffset the new minimum offset
* @param {number} newMaxOffset the new maximum offset
*/ */
positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) { positionTrackingBar: function(newMinValue, newMaxValue) {
this.scope.rzSliderModel = newMinValue; this.scope.rzSliderModel = newMinValue;
this.scope.rzSliderHigh = newMaxValue; this.scope.rzSliderHigh = newMaxValue;
this.updateHandles('rzSliderModel', newMinOffset); this.updateHandles('rzSliderModel', this.valueToOffset(newMinValue));
this.updateHandles('rzSliderHigh', newMaxOffset); this.updateHandles('rzSliderHigh', this.valueToOffset(newMaxValue));
this.applyModel(); this.applyModel();
}, },
...@@ -1517,18 +1501,18 @@ ...@@ -1517,18 +1501,18 @@
* Set the new value and offset to the current tracking handle * Set the new value and offset to the current tracking handle
* *
* @param {number} newValue new model value * @param {number} newValue new model value
* @param {number} newOffset new offset value
*/ */
positionTrackingHandle: function(newValue, newOffset) { positionTrackingHandle: function(newValue) {
var valueChanged = false; var valueChanged = false;
var switched = false;
if (this.range) { if (this.range) {
newValue = this.applyMinRange(newValue); newValue = this.applyMinRange(newValue);
newOffset = this.valueToOffset(newValue);
/* This is to check if we need to switch the min and max handles */ /* This is to check if we need to switch the min and max handles */
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) { if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
switched = true; if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
newValue = this.applyMinRange(this.scope.rzSliderHigh);
}
else {
this.scope[this.tracking] = this.scope.rzSliderHigh; this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsp); this.updateHandles(this.tracking, this.maxH.rzsp);
this.updateAriaAttributes(); this.updateAriaAttributes();
...@@ -1537,9 +1521,13 @@ ...@@ -1537,9 +1521,13 @@
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
if (this.options.keyboardSupport) if (this.options.keyboardSupport)
this.focusElement(this.maxH); this.focusElement(this.maxH);
}
valueChanged = true; valueChanged = true;
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) { } else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
switched = true; if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
newValue = this.applyMinRange(this.scope.rzSliderModel);
}
else {
this.scope[this.tracking] = this.scope.rzSliderModel; this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsp); this.updateHandles(this.tracking, this.minH.rzsp);
this.updateAriaAttributes(); this.updateAriaAttributes();
...@@ -1548,21 +1536,20 @@ ...@@ -1548,21 +1536,20 @@
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
if (this.options.keyboardSupport) if (this.options.keyboardSupport)
this.focusElement(this.minH); this.focusElement(this.minH);
}
valueChanged = true; valueChanged = true;
} }
} }
if (this.scope[this.tracking] !== newValue) { if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue; this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset); this.updateHandles(this.tracking, this.valueToOffset(newValue));
this.updateAriaAttributes(); this.updateAriaAttributes();
valueChanged = true; valueChanged = true;
} }
if (valueChanged) { if (valueChanged)
this.applyModel(); this.applyModel();
}
return switched;
}, },
applyMinRange: function(newValue) { applyMinRange: function(newValue) {
......
dist/rzslider.min.css
View file @ 27c8d1b7
/*! angularjs-slider - v2.5.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-01-24 */ /*! angularjs-slider - v2.5.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-01-31 */
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: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 .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.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.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;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 .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.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.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file \ No newline at end of file
dist/rzslider.min.js
View file @ 27c8d1b7
This diff is collapsed.
src/rzslider.js
View file @ 27c8d1b7
...@@ -56,6 +56,7 @@ ...@@ -56,6 +56,7 @@
keyboardSupport: true, keyboardSupport: true,
scale: 1, scale: 1,
enforceRange: false, enforceRange: false,
noSwitching: false,
onlyBindHandles: false, onlyBindHandles: false,
onStart: null, onStart: null,
onChange: null, onChange: null,
...@@ -847,7 +848,7 @@ ...@@ -847,7 +848,7 @@
updateHandles: function(which, newOffset) { updateHandles: function(which, newOffset) {
if (which === 'rzSliderModel') if (which === 'rzSliderModel')
this.updateLowHandle(newOffset); this.updateLowHandle(newOffset);
else if (which === 'rzSliderHigh') else
this.updateHighHandle(newOffset); this.updateHighHandle(newOffset);
this.updateSelectionBar(); this.updateSelectionBar();
...@@ -887,7 +888,7 @@ ...@@ -887,7 +888,7 @@
}, },
/** /**
* Show / hide floor / ceiling label * Show/hide floor/ceiling label
* *
* @returns {undefined} * @returns {undefined}
*/ */
...@@ -1181,8 +1182,15 @@ ...@@ -1181,8 +1182,15 @@
if (!this.range) { if (!this.range) {
return this.minH; return this.minH;
} }
var offset = this.getEventPosition(event); var offset = this.getEventPosition(event),
return Math.abs(offset - this.minH.rzsp) < Math.abs(offset - this.maxH.rzsp) ? this.minH : this.maxH; distanceMin = Math.abs(offset - this.minH.rzsp),
distanceMax = Math.abs(offset - this.maxH.rzsp);
if (distanceMin < distanceMax)
return this.minH;
else if (distanceMin > distanceMax)
return this.maxH;
else //if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
return offset < this.minH.rzsp ? this.minH : this.maxH;
}, },
/** /**
...@@ -1326,21 +1334,14 @@ ...@@ -1326,21 +1334,14 @@
newValue; newValue;
if (newOffset <= 0) { if (newOffset <= 0) {
if (pointer.rzsp === 0)
return;
newValue = this.minValue; newValue = this.minValue;
newOffset = 0;
} else if (newOffset >= this.maxPos) { } else if (newOffset >= this.maxPos) {
if (pointer.rzsp === this.maxPos)
return;
newValue = this.maxValue; newValue = this.maxValue;
newOffset = this.maxPos;
} else { } else {
newValue = this.offsetToValue(newOffset); newValue = this.offsetToValue(newOffset);
newValue = this.roundStep(newValue); newValue = this.roundStep(newValue);
newOffset = this.valueToOffset(newValue);
} }
this.positionTrackingHandle(newValue, newOffset); this.positionTrackingHandle(newValue);
}, },
/** /**
...@@ -1406,36 +1407,28 @@ ...@@ -1406,36 +1407,28 @@
if (action == null || this.tracking === '') return; if (action == null || this.tracking === '') return;
event.preventDefault(); event.preventDefault();
var newValue = this.roundStep(this.sanitizeValue(action)), var newValue = this.roundStep(this.sanitizeValue(action));
newOffset = this.valueToOffset(newValue);
if (!this.options.draggableRangeOnly) { if (!this.options.draggableRangeOnly) {
this.positionTrackingHandle(newValue, newOffset); this.positionTrackingHandle(newValue);
} else { } else {
var difference = this.scope.rzSliderHigh - this.scope.rzSliderModel, var difference = this.scope.rzSliderHigh - this.scope.rzSliderModel,
newMinOffset, newMaxOffset,
newMinValue, newMaxValue; newMinValue, newMaxValue;
if (this.tracking === 'rzSliderModel') { if (this.tracking === 'rzSliderModel') {
newMinValue = newValue; newMinValue = newValue;
newMinOffset = newOffset;
newMaxValue = newValue + difference; newMaxValue = newValue + difference;
if (newMaxValue > this.maxValue) { if (newMaxValue > this.maxValue) {
newMaxValue = this.maxValue; newMaxValue = this.maxValue;
newMinValue = newMaxValue - difference; newMinValue = newMaxValue - difference;
newMinOffset = this.valueToOffset(newMinValue);
} }
newMaxOffset = this.valueToOffset(newMaxValue);
} else { } else {
newMaxValue = newValue; newMaxValue = newValue;
newMaxOffset = newOffset;
newMinValue = newValue - difference; newMinValue = newValue - difference;
if (newMinValue < this.minValue) { if (newMinValue < this.minValue) {
newMinValue = this.minValue; newMinValue = this.minValue;
newMaxValue = newMinValue + difference; newMaxValue = newMinValue + difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} }
newMinOffset = this.valueToOffset(newMinValue);
} }
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset); this.positionTrackingBar(newMinValue, newMaxValue);
} }
}, },
...@@ -1473,32 +1466,25 @@ ...@@ -1473,32 +1466,25 @@
*/ */
onDragMove: function(pointer, event) { onDragMove: function(pointer, event) {
var newOffset = this.getEventPosition(event), var newOffset = this.getEventPosition(event),
newMinOffset, newMaxOffset,
newMinValue, newMaxValue; newMinValue, newMaxValue;
if (newOffset <= this.dragging.lowLimit) { if (newOffset <= this.dragging.lowLimit) {
if (this.minH.rzsp === 0) if (this.minH.rzsp === 0)
return; return;
newMinValue = this.minValue; newMinValue = this.minValue;
newMinOffset = 0;
newMaxValue = this.minValue + this.dragging.difference; newMaxValue = this.minValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} else if (newOffset >= this.maxPos - this.dragging.highLimit) { } else if (newOffset >= this.maxPos - this.dragging.highLimit) {
if (this.maxH.rzsp === this.maxPos) if (this.maxH.rzsp === this.maxPos)
return; return;
newMaxValue = this.maxValue; newMaxValue = this.maxValue;
newMaxOffset = this.maxPos;
newMinValue = this.maxValue - this.dragging.difference; newMinValue = this.maxValue - this.dragging.difference;
newMinOffset = this.valueToOffset(newMinValue);
} else { } else {
newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit); newMinValue = this.offsetToValue(newOffset - this.dragging.lowLimit);
newMinValue = this.roundStep(newMinValue); newMinValue = this.roundStep(newMinValue);
newMinOffset = this.valueToOffset(newMinValue);
newMaxValue = newMinValue + this.dragging.difference; newMaxValue = newMinValue + this.dragging.difference;
newMaxOffset = this.valueToOffset(newMaxValue);
} }
this.positionTrackingBar(newMinValue, newMaxValue, newMinOffset, newMaxOffset); this.positionTrackingBar(newMinValue, newMaxValue);
}, },
/** /**
...@@ -1506,14 +1492,12 @@ ...@@ -1506,14 +1492,12 @@
* *
* @param {number} newMinValue the new minimum value * @param {number} newMinValue the new minimum value
* @param {number} newMaxValue the new maximum value * @param {number} newMaxValue the new maximum value
* @param {number} newMinOffset the new minimum offset
* @param {number} newMaxOffset the new maximum offset
*/ */
positionTrackingBar: function(newMinValue, newMaxValue, newMinOffset, newMaxOffset) { positionTrackingBar: function(newMinValue, newMaxValue) {
this.scope.rzSliderModel = newMinValue; this.scope.rzSliderModel = newMinValue;
this.scope.rzSliderHigh = newMaxValue; this.scope.rzSliderHigh = newMaxValue;
this.updateHandles('rzSliderModel', newMinOffset); this.updateHandles('rzSliderModel', this.valueToOffset(newMinValue));
this.updateHandles('rzSliderHigh', newMaxOffset); this.updateHandles('rzSliderHigh', this.valueToOffset(newMaxValue));
this.applyModel(); this.applyModel();
}, },
...@@ -1521,18 +1505,18 @@ ...@@ -1521,18 +1505,18 @@
* Set the new value and offset to the current tracking handle * Set the new value and offset to the current tracking handle
* *
* @param {number} newValue new model value * @param {number} newValue new model value
* @param {number} newOffset new offset value
*/ */
positionTrackingHandle: function(newValue, newOffset) { positionTrackingHandle: function(newValue) {
var valueChanged = false; var valueChanged = false;
var switched = false;
if (this.range) { if (this.range) {
newValue = this.applyMinRange(newValue); newValue = this.applyMinRange(newValue);
newOffset = this.valueToOffset(newValue);
/* This is to check if we need to switch the min and max handles */ /* This is to check if we need to switch the min and max handles */
if (this.tracking === 'rzSliderModel' && newValue >= this.scope.rzSliderHigh) { if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
switched = true; if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
newValue = this.applyMinRange(this.scope.rzSliderHigh);
}
else {
this.scope[this.tracking] = this.scope.rzSliderHigh; this.scope[this.tracking] = this.scope.rzSliderHigh;
this.updateHandles(this.tracking, this.maxH.rzsp); this.updateHandles(this.tracking, this.maxH.rzsp);
this.updateAriaAttributes(); this.updateAriaAttributes();
...@@ -1541,9 +1525,13 @@ ...@@ -1541,9 +1525,13 @@
this.maxH.addClass('rz-active'); this.maxH.addClass('rz-active');
if (this.options.keyboardSupport) if (this.options.keyboardSupport)
this.focusElement(this.maxH); this.focusElement(this.maxH);
}
valueChanged = true; valueChanged = true;
} else if (this.tracking === 'rzSliderHigh' && newValue <= this.scope.rzSliderModel) { } else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
switched = true; if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
newValue = this.applyMinRange(this.scope.rzSliderModel);
}
else {
this.scope[this.tracking] = this.scope.rzSliderModel; this.scope[this.tracking] = this.scope.rzSliderModel;
this.updateHandles(this.tracking, this.minH.rzsp); this.updateHandles(this.tracking, this.minH.rzsp);
this.updateAriaAttributes(); this.updateAriaAttributes();
...@@ -1552,21 +1540,20 @@ ...@@ -1552,21 +1540,20 @@
this.minH.addClass('rz-active'); this.minH.addClass('rz-active');
if (this.options.keyboardSupport) if (this.options.keyboardSupport)
this.focusElement(this.minH); this.focusElement(this.minH);
}
valueChanged = true; valueChanged = true;
} }
} }
if (this.scope[this.tracking] !== newValue) { if (this.scope[this.tracking] !== newValue) {
this.scope[this.tracking] = newValue; this.scope[this.tracking] = newValue;
this.updateHandles(this.tracking, newOffset); this.updateHandles(this.tracking, this.valueToOffset(newValue));
this.updateAriaAttributes(); this.updateAriaAttributes();
valueChanged = true; valueChanged = true;
} }
if (valueChanged) { if (valueChanged)
this.applyModel(); this.applyModel();
}
return switched;
}, },
applyMinRange: function(newValue) { applyMinRange: function(newValue) {
......
src/rzslider.less
View file @ 27c8d1b7
...@@ -94,10 +94,13 @@ rzslider { ...@@ -94,10 +94,13 @@ rzslider {
&:hover:after { &:hover:after {
background-color: @handleHoverColor; background-color: @handleHoverColor;
} }
&.rz-active:after { &.rz-active{
z-index: 4;
&:after {
background-color: @handleActiveColor; background-color: @handleActiveColor;
} }
} }
}
.rz-bubble { .rz-bubble {
cursor: default; cursor: default;
......
tests/spec/rz-slider-service-test.js
View file @ 27c8d1b7
This diff is collapsed.
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