Skip to content

Commit 1714aea

Browse files
ValentinHValentinH
committed
Merge pull request #333 from angular-slider/maxRange-option
feat(maxRange): Add a maxRange option
2 parents 2d346ff + 27645e4 commit 1714aea

File tree

9 files changed

+221
-36
lines changed

9 files changed

+221
-36
lines changed

‎README.md

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -186,9 +186,10 @@ The default options are:
186186
ceil: null, //defaults to rz-slider-model
187187
step: 1,
188188
precision: 0,
189-
minRange: 0,
190189
minLimit: null,
191190
maxLimit: null,
191+
minRange: null,
192+
maxRange: null,
192193
id: null,
193194
translate: null,
194195
getLegend: null,
@@ -231,12 +232,14 @@ The default options are:
231232

232233
**precision** - _Number (defaults to 0)_: The precision to display values with. The `toFixed()` is used internally for this.
233234

234-
**minRange** - _Number (defaults to 0)_: The minimum range authorized on the slider. *Applies to range slider only.*
235-
236235
**minLimit** - _Number (defaults to null)_: The minimum value authorized on the slider.
237236

238237
**maxLimit** - _Number (defaults to null)_: The maximum value authorized on the slider.
239238

239+
**minRange** - _Number (defaults to null)_: The minimum range authorized on the slider. *Applies to range slider only.*
240+
241+
**maxRange** - _Number (defaults to null)_: The minimum range authorized on the slider. *Applies to range slider only.*
242+
240243
**translate** - _Function(value, sliderId, label)_: Custom translate function. Use this if you want to translate values displayed on the slider.
241244
`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:
242245
- *'model'*: the model label

‎demo/demo.js

Lines changed: 7 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
1717
}
1818
};
1919

20-
//Range slider with minRange config
20+
//Range slider with minLimit and maxLimit config
2121
$scope.minMaxLimitSlider = {
2222
value: 50,
2323
options: {
@@ -29,15 +29,16 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
2929
}
3030
};
3131

32-
//Range slider with minRange config
33-
$scope.minRangeSlider = {
34-
minValue: 10,
35-
maxValue: 90,
32+
//Range slider with minRange and maxRange config
33+
$scope.minMaxRangeSlider = {
34+
minValue: 40,
35+
maxValue: 60,
3636
options: {
3737
floor: 0,
3838
ceil: 100,
3939
step: 1,
40-
minRange: 10
40+
minRange: 10,
41+
maxRange: 50
4142
}
4243
};
4344

‎demo/index.html

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -45,11 +45,11 @@ <h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
4545
</article>
4646

4747
<article>
48-
<h2>Range slider with minimum range of 10</h2>
48+
<h2>Range slider with minimum range of 10 and maximum of 50</h2>
4949
<rzslider
50-
rz-slider-model="minRangeSlider.minValue"
51-
rz-slider-high="minRangeSlider.maxValue"
52-
rz-slider-options="minRangeSlider.options"
50+
rz-slider-model="minMaxRangeSlider.minValue"
51+
rz-slider-high="minMaxRangeSlider.maxValue"
52+
rz-slider-options="minMaxRangeSlider.options"
5353
></rzslider>
5454
</article>
5555

‎dist/rzslider.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,8 @@
3131
ceil: null, //defaults to rz-slider-model
3232
step: 1,
3333
precision: 0,
34-
minRange: 0,
34+
minRange: null,
35+
maxRange: null,
3536
minLimit: null,
3637
maxLimit: null,
3738
id: null,
@@ -1758,11 +1759,11 @@
17581759

17591760
newValue = this.applyMinMaxLimit(newValue);
17601761
if (this.range) {
1761-
newValue = this.applyMinRange(newValue);
1762+
newValue = this.applyMinMaxRange(newValue);
17621763
/* This is to check if we need to switch the min and max handles */
17631764
if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
17641765
if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
1765-
newValue = this.applyMinRange(this.scope.rzSliderHigh);
1766+
newValue = this.applyMinMaxRange(this.scope.rzSliderHigh);
17661767
}
17671768
else {
17681769
this.scope[this.tracking] = this.scope.rzSliderHigh;
@@ -1777,7 +1778,7 @@
17771778
valueChanged = true;
17781779
} else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
17791780
if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
1780-
newValue = this.applyMinRange(this.scope.rzSliderModel);
1781+
newValue = this.applyMinMaxRange(this.scope.rzSliderModel);
17811782
}
17821783
else {
17831784
this.scope[this.tracking] = this.scope.rzSliderModel;
@@ -1806,24 +1807,31 @@
18061807

18071808
applyMinMaxLimit: function(newValue) {
18081809
if (this.options.minLimit != null && newValue < this.options.minLimit)
1809-
return this.options.minLimit
1810+
return this.options.minLimit;
18101811
if (this.options.maxLimit != null && newValue > this.options.maxLimit)
1811-
return this.options.maxLimit
1812+
return this.options.maxLimit;
18121813
return newValue;
18131814
},
18141815

1815-
applyMinRange: function(newValue) {
1816-
if (this.options.minRange !== 0) {
1817-
var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
1818-
difference = Math.abs(newValue - oppositeValue);
1819-
1816+
applyMinMaxRange: function(newValue) {
1817+
var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
1818+
difference = Math.abs(newValue - oppositeValue);
1819+
if (this.options.minRange != null) {
18201820
if (difference < this.options.minRange) {
18211821
if (this.tracking === 'rzSliderModel')
18221822
return this.scope.rzSliderHigh - this.options.minRange;
18231823
else
18241824
return this.scope.rzSliderModel + this.options.minRange;
18251825
}
18261826
}
1827+
if (this.options.maxRange != null) {
1828+
if (difference > this.options.maxRange) {
1829+
if (this.tracking === 'rzSliderModel')
1830+
return this.scope.rzSliderHigh - this.options.maxRange;
1831+
else
1832+
return this.scope.rzSliderModel + this.options.maxRange;
1833+
}
1834+
}
18271835
return newValue;
18281836
},
18291837

‎dist/rzslider.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js

Lines changed: 19 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,8 @@
3535
ceil: null, //defaults to rz-slider-model
3636
step: 1,
3737
precision: 0,
38-
minRange: 0,
38+
minRange: null,
39+
maxRange: null,
3940
minLimit: null,
4041
maxLimit: null,
4142
id: null,
@@ -1762,11 +1763,11 @@
17621763

17631764
newValue = this.applyMinMaxLimit(newValue);
17641765
if (this.range) {
1765-
newValue = this.applyMinRange(newValue);
1766+
newValue = this.applyMinMaxRange(newValue);
17661767
/* This is to check if we need to switch the min and max handles */
17671768
if (this.tracking === 'rzSliderModel' && newValue > this.scope.rzSliderHigh) {
17681769
if (this.options.noSwitching && this.scope.rzSliderHigh !== this.minValue) {
1769-
newValue = this.applyMinRange(this.scope.rzSliderHigh);
1770+
newValue = this.applyMinMaxRange(this.scope.rzSliderHigh);
17701771
}
17711772
else {
17721773
this.scope[this.tracking] = this.scope.rzSliderHigh;
@@ -1781,7 +1782,7 @@
17811782
valueChanged = true;
17821783
} else if (this.tracking === 'rzSliderHigh' && newValue < this.scope.rzSliderModel) {
17831784
if (this.options.noSwitching && this.scope.rzSliderModel !== this.maxValue) {
1784-
newValue = this.applyMinRange(this.scope.rzSliderModel);
1785+
newValue = this.applyMinMaxRange(this.scope.rzSliderModel);
17851786
}
17861787
else {
17871788
this.scope[this.tracking] = this.scope.rzSliderModel;
@@ -1810,24 +1811,31 @@
18101811

18111812
applyMinMaxLimit: function(newValue) {
18121813
if (this.options.minLimit != null && newValue < this.options.minLimit)
1813-
return this.options.minLimit
1814+
return this.options.minLimit;
18141815
if (this.options.maxLimit != null && newValue > this.options.maxLimit)
1815-
return this.options.maxLimit
1816+
return this.options.maxLimit;
18161817
return newValue;
18171818
},
18181819

1819-
applyMinRange: function(newValue) {
1820-
if (this.options.minRange !== 0) {
1821-
var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
1822-
difference = Math.abs(newValue - oppositeValue);
1823-
1820+
applyMinMaxRange: function(newValue) {
1821+
var oppositeValue = this.tracking === 'rzSliderModel' ? this.scope.rzSliderHigh : this.scope.rzSliderModel,
1822+
difference = Math.abs(newValue - oppositeValue);
1823+
if (this.options.minRange != null) {
18241824
if (difference < this.options.minRange) {
18251825
if (this.tracking === 'rzSliderModel')
18261826
return this.scope.rzSliderHigh - this.options.minRange;
18271827
else
18281828
return this.scope.rzSliderModel + this.options.minRange;
18291829
}
18301830
}
1831+
if (this.options.maxRange != null) {
1832+
if (difference > this.options.maxRange) {
1833+
if (this.tracking === 'rzSliderModel')
1834+
return this.scope.rzSliderHigh - this.options.maxRange;
1835+
else
1836+
return this.scope.rzSliderModel + this.options.maxRange;
1837+
}
1838+
}
18311839
return newValue;
18321840
},
18331841

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

Lines changed: 96 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -127,6 +127,53 @@
127127
expect(helper.scope.slider.max).to.equal(56);
128128
});
129129

130+
it('should not be modified by keyboard if new range is above maxRange', function() {
131+
var sliderConf = {
132+
min: 45,
133+
max: 55,
134+
options: {
135+
floor: 0,
136+
ceil: 100,
137+
step: 1,
138+
maxRange: 10
139+
}
140+
};
141+
helper.createRangeSlider(sliderConf);
142+
//try to move minH left
143+
helper.slider.minH.triggerHandler('focus');
144+
helper.pressKeydown(helper.slider.minH, 'LEFT');
145+
expect(helper.scope.slider.min).to.equal(45);
146+
147+
//try to move maxH right
148+
helper.slider.maxH.triggerHandler('focus');
149+
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
150+
expect(helper.scope.slider.max).to.equal(55);
151+
});
152+
153+
it('should be modified by keyboard if new range is below maxRange', function() {
154+
var sliderConf = {
155+
min: 45,
156+
max: 55,
157+
options: {
158+
floor: 0,
159+
ceil: 100,
160+
step: 1,
161+
maxRange: 10
162+
}
163+
};
164+
helper.createRangeSlider(sliderConf);
165+
166+
//try to move minH right
167+
helper.slider.minH.triggerHandler('focus');
168+
helper.pressKeydown(helper.slider.minH, 'RIGHT');
169+
expect(helper.scope.slider.min).to.equal(46);
170+
171+
//try to move maxH left
172+
helper.slider.maxH.triggerHandler('focus');
173+
helper.pressKeydown(helper.slider.maxH, 'LEFT');
174+
expect(helper.scope.slider.max).to.equal(54);
175+
});
176+
130177
it('should be modified by keyboard if new value is above minLimit', function() {
131178
var sliderConf = {
132179
value: 10,
@@ -327,6 +374,55 @@
327374
helper.pressKeydown(helper.slider.maxH, 'LEFT');
328375
expect(helper.scope.slider.max).to.equal(56);
329376
});
377+
378+
it('should not be modified by keyboard if new range is above maxRange', function() {
379+
var sliderConf = {
380+
min: 45,
381+
max: 55,
382+
options: {
383+
floor: 0,
384+
ceil: 100,
385+
step: 1,
386+
maxRange: 10,
387+
rightToLeft: true
388+
}
389+
};
390+
helper.createRangeSlider(sliderConf);
391+
//try to move minH right ( increase in rtl )
392+
helper.slider.minH.triggerHandler('focus');
393+
helper.pressKeydown(helper.slider.minH, 'RIGHT');
394+
expect(helper.scope.slider.min).to.equal(45);
395+
396+
//try to move maxH left (decrease in rtl )
397+
helper.slider.maxH.triggerHandler('focus');
398+
helper.pressKeydown(helper.slider.maxH, 'LEFT');
399+
expect(helper.scope.slider.max).to.equal(55);
400+
});
401+
402+
it('should be modified by keyboard if new range is below maxRange', function() {
403+
var sliderConf = {
404+
min: 45,
405+
max: 55,
406+
options: {
407+
floor: 0,
408+
ceil: 100,
409+
step: 1,
410+
maxRange: 10,
411+
rightToLeft: true
412+
}
413+
};
414+
helper.createRangeSlider(sliderConf);
415+
416+
//try to move minH LEFT
417+
helper.slider.minH.triggerHandler('focus');
418+
helper.pressKeydown(helper.slider.minH, 'LEFT');
419+
expect(helper.scope.slider.min).to.equal(46);
420+
421+
//try to move maxH RIGHT
422+
helper.slider.maxH.triggerHandler('focus');
423+
helper.pressKeydown(helper.slider.maxH, 'RIGHT');
424+
expect(helper.scope.slider.max).to.equal(54);
425+
});
330426
});
331427
}());
332428

‎tests/specs/mouse-controls/minRange-noSwitching-range-slider-horizontal-test.js renamed to ‎tests/specs/mouse-controls/minMaxRange-noSwitching-range-slider-horizontal-test.js

File renamed without changes.

0 commit comments

Comments
 (0)