Skip to content

Commit 765cca1

Browse files
DanielReidValentinH
DanielReid
authored and
ValentinH
committed
Feature/restricted range (#638)
* Add restricted range slider
1 parent cf6cae6 commit 765cca1

17 files changed

+420
-117
lines changed

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -233,6 +233,7 @@ The default options are:
233233
precision: 0,
234234
minLimit: null,
235235
maxLimit: null,
236+
restrictedRange: null,
236237
minRange: null,
237238
maxRange: null,
238239
pushRange: false,
@@ -300,6 +301,8 @@ The default options are:
300301

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

304+
**restrictedRange** - _Object (defaults to null)_: Has two _Number_ properties, _from_ and _to_ that determine the bounds of an area that is not authorized for values. _Applies to range slider only._
305+
303306
**minRange** - _Number (defaults to null)_: The minimum range authorized on the slider. _Applies to range slider only._
304307

305308
**maxRange** - _Number (defaults to null)_: The maximum range authorized on the slider. _Applies to range slider only._

‎demo/demo.js‎

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,20 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
5151
},
5252
}
5353

54+
$scope.restrictedRangeSlider = {
55+
minValue: 10,
56+
maxValue: 90,
57+
options: {
58+
restrictedRange: {
59+
from: 30,
60+
to: 70,
61+
},
62+
floor: 0,
63+
ceil: 100,
64+
step: 1,
65+
},
66+
}
67+
5468
//Range slider with minRange and maxRange config
5569
$scope.minMaxRangeSlider = {
5670
minValue: 40,

‎demo/index.html‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,15 @@ <h2>Range slider with min limit set to 10 and max limit set to 90 </h2>
5454
></rzslider>
5555
</article>
5656

57+
<article>
58+
<h2>Range slider with restricted area from 30 to 70</h2>
59+
<rzslider
60+
data-rz-slider-model="restrictedRangeSlider.minValue"
61+
data-rz-slider-high="restrictedRangeSlider.maxValue"
62+
data-rz-slider-options="restrictedRangeSlider.options"
63+
></rzslider>
64+
</article>
65+
5766
<article>
5867
<h2>Range slider with minimum range of 10 and maximum of 50</h2>
5968
<rzslider

‎dist/rzslider.css‎

Lines changed: 12 additions & 10 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.js‎

Lines changed: 69 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v6.5.1 -
22
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2018-03-30 */
4+
2018-06-29 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
;(function(root, factory) {
@@ -36,6 +36,7 @@
3636
precision: 0,
3737
minRange: null,
3838
maxRange: null,
39+
restrictedRange: null,
3940
pushRange: false,
4041
minLimit: null,
4142
maxLimit: null,
@@ -371,6 +372,7 @@
371372
this.setDisabledState()
372373
this.calcViewDimensions()
373374
this.setMinAndMax()
375+
this.updateRestrictionBar()
374376
this.addAccessibility()
375377
this.updateCeilLab()
376378
this.updateFloorLab()
@@ -635,6 +637,7 @@
635637
this.manageEventsBindings()
636638
this.setDisabledState()
637639
this.calcViewDimensions()
640+
this.updateRestrictionBar()
638641
this.refocusPointerIfNeeded()
639642
},
640643

@@ -676,27 +679,30 @@
676679
this.selBar = jElem
677680
break
678681
case 4:
679-
this.minH = jElem
682+
this.restrictedBar = jElem
680683
break
681684
case 5:
682-
this.maxH = jElem
685+
this.minH = jElem
683686
break
684687
case 6:
685-
this.flrLab = jElem
688+
this.maxH = jElem
686689
break
687690
case 7:
688-
this.ceilLab = jElem
691+
this.flrLab = jElem
689692
break
690693
case 8:
691-
this.minLab = jElem
694+
this.ceilLab = jElem
692695
break
693696
case 9:
694-
this.maxLab = jElem
697+
this.minLab = jElem
695698
break
696699
case 10:
697-
this.cmbLab = jElem
700+
this.maxLab = jElem
698701
break
699702
case 11:
703+
this.cmbLab = jElem
704+
break
705+
case 12:
700706
this.ticks = jElem
701707
break
702708
}
@@ -753,6 +759,7 @@
753759
this.leftOutSelBar,
754760
!this.range || !this.options.showOuterSelectionBars
755761
)
762+
this.alwaysHide(this.restrictedBar, !this.options.restrictedRange)
756763
this.alwaysHide(
757764
this.rightOutSelBar,
758765
!this.range || !this.options.showOuterSelectionBars
@@ -1305,6 +1312,26 @@
13051312
return isRTL ? pos <= ceilPos + ceilDim + 2 : pos + dim >= ceilPos - 2
13061313
},
13071314

1315+
/**
1316+
* Update restricted area bar
1317+
*
1318+
* @returns {undefined}
1319+
*/
1320+
updateRestrictionBar: function() {
1321+
var position = 0,
1322+
dimension = 0
1323+
if (this.options.restrictedRange) {
1324+
var from = this.valueToPosition(this.options.restrictedRange.from),
1325+
to = this.valueToPosition(this.options.restrictedRange.to)
1326+
dimension = Math.abs(to - from)
1327+
position = this.options.rightToLeft
1328+
? to + this.handleHalfDim
1329+
: from + this.handleHalfDim
1330+
this.setDimension(this.restrictedBar, dimension)
1331+
this.setPosition(this.restrictedBar, position)
1332+
}
1333+
},
1334+
13081335
/**
13091336
* Update slider selection bar, combined label and range label
13101337
*
@@ -1379,8 +1406,12 @@
13791406
: 0,
13801407
reversed = (offset - position > 0) ^ isSelectionBarFromRight,
13811408
direction = this.options.vertical
1382-
? reversed ? 'bottom' : 'top'
1383-
: reversed ? 'left' : 'right'
1409+
? reversed
1410+
? 'bottom'
1411+
: 'top'
1412+
: reversed
1413+
? 'left'
1414+
: 'right'
13841415
this.scope.barStyle = {
13851416
backgroundImage:
13861417
'linear-gradient(to ' +
@@ -1775,9 +1806,8 @@
17751806
else if (!this.options.rightToLeft)
17761807
//if event is at the same distance from min/max then if it's at left of minH, we return minH else maxH
17771808
return position < this.minH.rzsp ? this.minH : this.maxH
1778-
else
1779-
//reverse in rtl
1780-
return position > this.minH.rzsp ? this.minH : this.maxH
1809+
//reverse in rtl
1810+
else return position > this.minH.rzsp ? this.minH : this.maxH
17811811
},
17821812

17831813
/**
@@ -2369,6 +2399,7 @@
23692399
positionTrackingHandle: function(newValue) {
23702400
var valueChanged = false
23712401
newValue = this.applyMinMaxLimit(newValue)
2402+
newValue = this.applyRestrictedRange(newValue)
23722403
if (this.range) {
23732404
if (this.options.pushRange) {
23742405
newValue = this.applyPushRange(newValue)
@@ -2456,6 +2487,30 @@
24562487
return newValue
24572488
},
24582489

2490+
applyRestrictedRange: function(newValue) {
2491+
if (
2492+
this.options.restrictedRange != null &&
2493+
newValue > this.options.restrictedRange.from &&
2494+
newValue < this.options.restrictedRange.to
2495+
) {
2496+
var halfWidth =
2497+
(this.options.restrictedRange.to -
2498+
this.options.restrictedRange.from) /
2499+
2
2500+
if (this.tracking === 'lowValue') {
2501+
return newValue > this.options.restrictedRange.from + halfWidth
2502+
? this.options.restrictedRange.to
2503+
: this.options.restrictedRange.from
2504+
}
2505+
if (this.tracking === 'highValue') {
2506+
return newValue < this.options.restrictedRange.to - halfWidth
2507+
? this.options.restrictedRange.from
2508+
: this.options.restrictedRange.to
2509+
}
2510+
}
2511+
return newValue
2512+
},
2513+
24592514
applyPushRange: function(newValue) {
24602515
var difference =
24612516
this.tracking === 'lowValue'
@@ -2654,7 +2709,7 @@
26542709
'use strict';
26552710

26562711
$templateCache.put('rzSliderTpl.html',
2657-
"<div class=rzslider><span class=\"rz-bar-wrapper rz-left-out-selection\"><span class=rz-bar></span></span> <span class=\"rz-bar-wrapper rz-right-out-selection\"><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=\"rz-pointer rz-pointer-min\" ng-style=minPointerStyle></span> <span class=\"rz-pointer rz-pointer-max\" ng-style=maxPointerStyle></span> <span class=\"rz-bubble rz-limit rz-floor\"></span> <span class=\"rz-bubble rz-limit rz-ceil\"></span> <span class=\"rz-bubble rz-model-value\"></span> <span class=\"rz-bubble rz-model-high\"></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=rz-tick ng-class=\"{'rz-selected': t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=rz-tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span> <span ng-if=\"t.legend != null\" class=rz-tick-legend>{{ t.legend }}</span></li></ul></div>"
2712+
"<div class=rzslider><span class=\"rz-bar-wrapper rz-left-out-selection\"><span class=rz-bar></span></span> <span class=\"rz-bar-wrapper rz-right-out-selection\"><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\" ng-style=barStyle></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-restricted\" ng-style=restrictionStyle></span></span> <span class=\"rz-pointer rz-pointer-min\" ng-style=minPointerStyle></span> <span class=\"rz-pointer rz-pointer-max\" ng-style=maxPointerStyle></span> <span class=\"rz-bubble rz-limit rz-floor\"></span> <span class=\"rz-bubble rz-limit rz-ceil\"></span> <span class=\"rz-bubble rz-model-value\"></span> <span class=\"rz-bubble rz-model-high\"></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=rz-tick ng-class=\"{'rz-selected': t.selected}\" ng-style=t.style ng-attr-uib-tooltip=\"{{ t.tooltip }}\" ng-attr-tooltip-placement={{t.tooltipPlacement}} ng-attr-tooltip-append-to-body=\"{{ t.tooltip ? true : undefined}}\"><span ng-if=\"t.value != null\" class=rz-tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span> <span ng-if=\"t.legend != null\" class=rz-tick-legend>{{ t.legend }}</span></li></ul></div>"
26582713
);
26592714

26602715
}]);

‎dist/rzslider.min.css‎

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js‎

Lines changed: 3 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)