Skip to content

Commit 2d346ff

Browse files
ValentinHValentinH
committed
Merge pull request #332 from angular-slider/min-max-limit
feat(minMaxLimit): Add a minLimit and a maxLimit
2 parents 477bc0f + 5fdb0e9 commit 2d346ff

10 files changed

+428
-25
lines changed

‎README.md

+6
Original file line numberDiff line numberDiff line change
@@ -187,6 +187,8 @@ The default options are:
187187
step: 1,
188188
precision: 0,
189189
minRange: 0,
190+
minLimit: null,
191+
maxLimit: null,
190192
id: null,
191193
translate: null,
192194
getLegend: null,
@@ -231,6 +233,10 @@ The default options are:
231233

232234
**minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. *Applies to range slider only.*
233235

236+
**minLimit** - _Number (defaults to null)_: The minimum value authorized on the slider.
237+
238+
**maxLimit** - _Number (defaults to null)_: The maximum value authorized on the slider.
239+
234240
**translate** - _Function(value, sliderId, label)_: Custom translate function. Use this if you want to translate values displayed on the slider.
235241
`sliderId` can be used to determine the slider for which we are translating the value. `label` is a string that can take the following values:
236242
- *'model'*: the model label

‎demo/demo.js

+12
Original file line numberDiff line numberDiff line change
@@ -17,6 +17,18 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
1717
}
1818
};
1919

20+
//Range slider with minRange config
21+
$scope.minMaxLimitSlider = {
22+
value: 50,
23+
options: {
24+
floor: 0,
25+
ceil: 100,
26+
step: 1,
27+
minLimit: 10,
28+
maxLimit: 90
29+
}
30+
};
31+
2032
//Range slider with minRange config
2133
$scope.minRangeSlider = {
2234
minValue: 10,

‎demo/index.html

+8
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,14 @@ <h2>Range slider</h2>
3636
></rzslider>
3737
</article>
3838

39+
<article>
40+
<h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
41+
<rzslider
42+
rz-slider-model="minMaxLimitSlider.value"
43+
rz-slider-options="minMaxLimitSlider.options"
44+
></rzslider>
45+
</article>
46+
3947
<article>
4048
<h2>Range slider with minimum range of 10</h2>
4149
<rzslider

‎dist/rzslider.js

+12-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.13.0 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2016-05-13 */
4+
2016-05-22 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -32,6 +32,8 @@
3232
step: 1,
3333
precision: 0,
3434
minRange: 0,
35+
minLimit: null,
36+
maxLimit: null,
3537
id: null,
3638
translate: null,
3739
getLegend: null,
@@ -1754,6 +1756,7 @@
17541756
positionTrackingHandle: function(newValue) {
17551757
var valueChanged = false;
17561758

1759+
newValue = this.applyMinMaxLimit(newValue);
17571760
if (this.range) {
17581761
newValue = this.applyMinRange(newValue);
17591762
/* This is to check if we need to switch the min and max handles */
@@ -1801,6 +1804,14 @@
18011804
this.applyModel();
18021805
},
18031806

1807+
applyMinMaxLimit: function(newValue) {
1808+
if (this.options.minLimit != null && newValue < this.options.minLimit)
1809+
return this.options.minLimit
1810+
if (this.options.maxLimit != null && newValue > this.options.maxLimit)
1811+
return this.options.maxLimit
1812+
return newValue;
1813+
},
1814+
18041815
applyMinRange: function(newValue) {
18051816
if (this.options.minRange !== 0) {
18061817
var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,

‎dist/rzslider.min.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js

+11
Original file line numberDiff line numberDiff line change
@@ -36,6 +36,8 @@
3636
step: 1,
3737
precision: 0,
3838
minRange: 0,
39+
minLimit: null,
40+
maxLimit: null,
3941
id: null,
4042
translate: null,
4143
getLegend: null,
@@ -1758,6 +1760,7 @@
17581760
positionTrackingHandle: function(newValue) {
17591761
var valueChanged = false;
17601762

1763+
newValue = this.applyMinMaxLimit(newValue);
17611764
if (this.range) {
17621765
newValue = this.applyMinRange(newValue);
17631766
/* This is to check if we need to switch the min and max handles */
@@ -1805,6 +1808,14 @@
18051808
this.applyModel();
18061809
},
18071810

1811+
applyMinMaxLimit: function(newValue) {
1812+
if (this.options.minLimit != null && newValue < this.options.minLimit)
1813+
return this.options.minLimit
1814+
if (this.options.maxLimit != null && newValue > this.options.maxLimit)
1815+
return this.options.maxLimit
1816+
return newValue;
1817+
},
1818+
18081819
applyMinRange: function(newValue) {
18091820
if (this.options.minRange !== 0) {
18101821
var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,

‎tests/specs/keyboard-controls/specific-test.js

+68
Original file line numberDiff line numberDiff line change
@@ -126,6 +126,74 @@
126126
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
127127
expect(helper.scope.slider.max).to.equal(56);
128128
});
129+
130+
it('should be modified by keyboard if new value is above minLimit', function() {
131+
var sliderConf = {
132+
value: 10,
133+
options: {
134+
floor: 0,
135+
ceil: 100,
136+
step: 1,
137+
minLimit: 10
138+
}
139+
};
140+
helper.createSlider(sliderConf);
141+
//try to move minH right
142+
helper.slider.minH.triggerHandler('focus');
143+
helper.pressKeydown(helper.slider.minH, 'RIGHT');
144+
expect(helper.scope.slider.value).to.equal(11);
145+
});
146+
147+
it('should not be modified by keyboard if new value is below minLimit', function() {
148+
var sliderConf = {
149+
value: 10,
150+
options: {
151+
floor: 0,
152+
ceil: 100,
153+
step: 1,
154+
minLimit: 10
155+
}
156+
};
157+
helper.createSlider(sliderConf);
158+
//try to move minH left
159+
helper.slider.minH.triggerHandler('focus');
160+
helper.pressKeydown(helper.slider.minH, 'LEFT');
161+
expect(helper.scope.slider.value).to.equal(10);
162+
});
163+
164+
it('should be modified by keyboard if new value is below maxLimit', function() {
165+
var sliderConf = {
166+
value: 90,
167+
options: {
168+
floor: 0,
169+
ceil: 100,
170+
step: 1,
171+
maxLimit: 90
172+
}
173+
};
174+
helper.createSlider(sliderConf);
175+
//try to move minH left
176+
helper.slider.minH.triggerHandler('focus');
177+
helper.pressKeydown(helper.slider.minH, 'LEFT');
178+
expect(helper.scope.slider.value).to.equal(89);
179+
});
180+
181+
it('should not be modified by keyboard if new value is above maxLimit', function() {
182+
var sliderConf = {
183+
value: 90,
184+
options: {
185+
floor: 0,
186+
ceil: 100,
187+
step: 1,
188+
maxLimit: 90
189+
}
190+
};
191+
helper.createSlider(sliderConf);
192+
//try to move minH right
193+
helper.slider.minH.triggerHandler('focus');
194+
helper.pressKeydown(helper.slider.minH, 'RIGHT');
195+
expect(helper.scope.slider.value).to.equal(90);
196+
});
129197
});
130198

131199
describe('Right to left Keyboard controls - specific tests', function() {

‎tests/specs/mouse-controls/minMaxLimit-range-slider-horizontal-test.js

+145
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,145 @@
1+
(function() {
2+
"use strict";
3+
4+
describe('Mouse controls - minLimit!=null && maxLimit!=null Range Horizontal', function() {
5+
var helper,
6+
RzSliderOptions,
7+
$rootScope,
8+
$timeout;
9+
10+
beforeEach(module('test-helper'));
11+
12+
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
13+
helper = TestHelper;
14+
RzSliderOptions = _RzSliderOptions_;
15+
$rootScope = _$rootScope_;
16+
$timeout = _$timeout_;
17+
}));
18+
19+
afterEach(function() {
20+
helper.clean();
21+
});
22+
23+
beforeEach(function() {
24+
var sliderConf = {
25+
min: 45,
26+
max: 55,
27+
options: {
28+
floor: 0,
29+
ceil: 100,
30+
minLimit: 40,
31+
maxLimit: 60
32+
}
33+
};
34+
helper.createRangeSlider(sliderConf);
35+
});
36+
afterEach(function() {
37+
// to clean document listener
38+
helper.fireMouseup();
39+
});
40+
41+
it('should be able to modify minH above minLimit', function() {
42+
helper.fireMousedown(helper.slider.minH, 0);
43+
var expectedValue = 42,
44+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
45+
helper.fireMousemove(offset);
46+
expect(helper.scope.slider.min).to.equal(42);
47+
});
48+
49+
it('should not be able to modify minH below minLimit', function() {
50+
helper.fireMousedown(helper.slider.minH, 0);
51+
var expectedValue = 30,
52+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
53+
helper.fireMousemove(offset);
54+
expect(helper.scope.slider.min).to.equal(40);
55+
});
56+
57+
it('should be able to modify maxH below maxLimit', function() {
58+
helper.fireMousedown(helper.slider.maxH, 0);
59+
var expectedValue = 58,
60+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
61+
helper.fireMousemove(offset);
62+
expect(helper.scope.slider.max).to.equal(58);
63+
});
64+
65+
it('should not be able to modify maxH above maxLimit', function() {
66+
helper.fireMousedown(helper.slider.maxH, 0);
67+
var expectedValue = 70,
68+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
69+
helper.fireMousemove(offset);
70+
expect(helper.scope.slider.max).to.equal(60);
71+
});
72+
});
73+
74+
describe('Right to left Mouse controls - minLimit!=null && maxLimit!=null Range Horizontal', function() {
75+
var helper,
76+
RzSliderOptions,
77+
$rootScope,
78+
$timeout;
79+
80+
beforeEach(module('test-helper'));
81+
82+
beforeEach(inject(function(TestHelper, _RzSliderOptions_, _$rootScope_, _$timeout_) {
83+
helper = TestHelper;
84+
RzSliderOptions = _RzSliderOptions_;
85+
$rootScope = _$rootScope_;
86+
$timeout = _$timeout_;
87+
}));
88+
89+
afterEach(function() {
90+
helper.clean();
91+
});
92+
93+
beforeEach(function() {
94+
var sliderConf = {
95+
min: 45,
96+
max: 55,
97+
options: {
98+
floor: 0,
99+
ceil: 100,
100+
minLimit: 40,
101+
maxLimit: 60,
102+
rightToLeft: true
103+
}
104+
};
105+
helper.createRangeSlider(sliderConf);
106+
});
107+
afterEach(function() {
108+
// to clean document listener
109+
helper.fireMouseup();
110+
});
111+
112+
it('should be able to modify minH above minLimit', function() {
113+
helper.fireMousedown(helper.slider.minH, 0);
114+
var expectedValue = 42,
115+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
116+
helper.fireMousemove(offset);
117+
expect(helper.scope.slider.min).to.equal(42);
118+
});
119+
120+
it('should not be able to modify minH below minLimit', function() {
121+
helper.fireMousedown(helper.slider.minH, 0);
122+
var expectedValue = 30,
123+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
124+
helper.fireMousemove(offset);
125+
expect(helper.scope.slider.min).to.equal(40);
126+
});
127+
128+
it('should be able to modify maxH below maxLimit', function() {
129+
helper.fireMousedown(helper.slider.maxH, 0);
130+
var expectedValue = 58,
131+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
132+
helper.fireMousemove(offset);
133+
expect(helper.scope.slider.max).to.equal(58);
134+
});
135+
136+
it('should not be able to modify maxH above maxLimit', function() {
137+
helper.fireMousedown(helper.slider.maxH, 0);
138+
var expectedValue = 70,
139+
offset = helper.slider.valueToOffset(expectedValue) + helper.slider.handleHalfDim + helper.slider.sliderElem.rzsp;
140+
helper.fireMousemove(offset);
141+
expect(helper.scope.slider.max).to.equal(60);
142+
});
143+
});
144+
}());
145+

0 commit comments

Comments
 (0)