Skip to content

Commit 167595f

Browse files
ValentinHValentinH
committed
feat(range): Add a pushRange option
As described in #311
1 parent 9b40f68 commit 167595f

File tree

5 files changed

+144
-65
lines changed

5 files changed

+144
-65
lines changed

‎demo/demo.js

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,18 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
5454
}
5555
};
5656

57+
//Range slider with minRange and pushRange config
58+
$scope.minPushRangeSlider = {
59+
minValue: 40,
60+
maxValue: 60,
61+
options: {
62+
floor: 0,
63+
ceil: 100,
64+
minRange: 10,
65+
pushRange: true
66+
}
67+
};
68+
5769
//Slider with selection bar
5870
$scope.slider_visible_bar = {
5971
value: 10,

‎demo/index.html

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,15 @@ <h2>Range slider with noSwitching=true</h2>
6262
></rzslider>
6363
</article>
6464

65+
<article>
66+
<h2>Range slider with minimum range of 10 and pushRange option</h2>
67+
<rzslider
68+
rz-slider-model="minPushRangeSlider.minValue"
69+
rz-slider-high="minPushRangeSlider.maxValue"
70+
rz-slider-options="minPushRangeSlider.options"
71+
></rzslider>
72+
</article>
73+
6574
<article>
6675
<h2>Slider with visible selection bar</h2>
6776
<rzslider

‎dist/rzslider.js

Lines changed: 61 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v4.0.1 -
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-06-04 */
4+
2016-06-05 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -33,6 +33,7 @@
3333
precision: 0,
3434
minRange: null,
3535
maxRange: null,
36+
pushRange: false,
3637
minLimit: null,
3738
maxLimit: null,
3839
id: null,
@@ -1873,40 +1874,47 @@
18731874

18741875
newValue = this.applyMinMaxLimit(newValue);
18751876
if (this.range) {
1876-
newValue = this.applyMinMaxRange(newValue);
1877-
/* This is to check if we need to switch the min and max handles */
1878-
if (this.tracking === 'lowValue' && newValue > this.highValue) {
1879-
if (this.options.noSwitching && this.highValue !== this.minValue) {
1880-
newValue = this.applyMinMaxRange(this.highValue);
1881-
}
1882-
else {
1883-
this.lowValue = this.highValue;
1884-
this.applyLowValue();
1885-
this.updateHandles(this.tracking, this.maxH.rzsp);
1886-
this.updateAriaAttributes();
1887-
this.tracking = 'highValue';
1888-
this.minH.removeClass('rz-active');
1889-
this.maxH.addClass('rz-active');
1890-
if (this.options.keyboardSupport)
1891-
this.focusElement(this.maxH);
1892-
}
1877+
if (this.options.pushRange) {
1878+
newValue = this.applyPushRange(newValue);
18931879
valueChanged = true;
1894-
} else if (this.tracking === 'highValue' && newValue < this.lowValue) {
1895-
if (this.options.noSwitching && this.lowValue !== this.maxValue) {
1896-
newValue = this.applyMinMaxRange(this.lowValue);
1880+
}
1881+
else {
1882+
newValue = this.applyMinMaxRange(newValue);
1883+
/* This is to check if we need to switch the min and max handles */
1884+
if (this.tracking === 'lowValue' && newValue > this.highValue) {
1885+
if (this.options.noSwitching && this.highValue !== this.minValue) {
1886+
newValue = this.applyMinMaxRange(this.highValue);
1887+
}
1888+
else {
1889+
this.lowValue = this.highValue;
1890+
this.applyLowValue();
1891+
this.updateHandles(this.tracking, this.maxH.rzsp);
1892+
this.updateAriaAttributes();
1893+
this.tracking = 'highValue';
1894+
this.minH.removeClass('rz-active');
1895+
this.maxH.addClass('rz-active');
1896+
if (this.options.keyboardSupport)
1897+
this.focusElement(this.maxH);
1898+
}
1899+
valueChanged = true;
18971900
}
1898-
else {
1899-
this.highValue = this.lowValue;
1900-
this.applyHighValue();
1901-
this.updateHandles(this.tracking, this.minH.rzsp);
1902-
this.updateAriaAttributes();
1903-
this.tracking = 'lowValue';
1904-
this.maxH.removeClass('rz-active');
1905-
this.minH.addClass('rz-active');
1906-
if (this.options.keyboardSupport)
1907-
this.focusElement(this.minH);
1901+
else if (this.tracking === 'highValue' && newValue < this.lowValue) {
1902+
if (this.options.noSwitching && this.lowValue !== this.maxValue) {
1903+
newValue = this.applyMinMaxRange(this.lowValue);
1904+
}
1905+
else {
1906+
this.highValue = this.lowValue;
1907+
this.applyHighValue();
1908+
this.updateHandles(this.tracking, this.minH.rzsp);
1909+
this.updateAriaAttributes();
1910+
this.tracking = 'lowValue';
1911+
this.maxH.removeClass('rz-active');
1912+
this.minH.addClass('rz-active');
1913+
if (this.options.keyboardSupport)
1914+
this.focusElement(this.minH);
1915+
}
1916+
valueChanged = true;
19081917
}
1909-
valueChanged = true;
19101918
}
19111919
}
19121920

@@ -1955,6 +1963,27 @@
19551963
return newValue;
19561964
},
19571965

1966+
applyPushRange: function(newValue) {
1967+
var difference = this.tracking === 'lowValue' ? this.highValue - newValue : newValue - this.lowValue,
1968+
range = this.options.minRange !== null ? this.options.minRange : this.options.step;
1969+
if (difference < range) {
1970+
if (this.tracking === 'lowValue') {
1971+
this.highValue = Math.min(newValue + range, this.maxValue);
1972+
newValue = this.highValue - range;
1973+
this.applyHighValue();
1974+
this.updateHandles('highValue', this.valueToOffset(this.highValue));
1975+
}
1976+
else {
1977+
this.lowValue = Math.max(newValue - range, this.minValue);
1978+
newValue = this.lowValue + range;
1979+
this.applyLowValue();
1980+
this.updateHandles('lowValue', this.valueToOffset(this.lowValue));
1981+
}
1982+
this.updateAriaAttributes();
1983+
}
1984+
return newValue;
1985+
},
1986+
19581987
/**
19591988
* Apply the model values using scope.$apply.
19601989
* We wrap it with the internalChange flag to avoid the watchers to be called

‎dist/rzslider.min.js

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

‎src/rzslider.js

Lines changed: 60 additions & 31 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@
3737
precision: 0,
3838
minRange: null,
3939
maxRange: null,
40+
pushRange: false,
4041
minLimit: null,
4142
maxLimit: null,
4243
id: null,
@@ -1877,40 +1878,47 @@
18771878

18781879
newValue = this.applyMinMaxLimit(newValue);
18791880
if (this.range) {
1880-
newValue = this.applyMinMaxRange(newValue);
1881-
/* This is to check if we need to switch the min and max handles */
1882-
if (this.tracking === 'lowValue' && newValue > this.highValue) {
1883-
if (this.options.noSwitching && this.highValue !== this.minValue) {
1884-
newValue = this.applyMinMaxRange(this.highValue);
1885-
}
1886-
else {
1887-
this.lowValue = this.highValue;
1888-
this.applyLowValue();
1889-
this.updateHandles(this.tracking, this.maxH.rzsp);
1890-
this.updateAriaAttributes();
1891-
this.tracking = 'highValue';
1892-
this.minH.removeClass('rz-active');
1893-
this.maxH.addClass('rz-active');
1894-
if (this.options.keyboardSupport)
1895-
this.focusElement(this.maxH);
1896-
}
1881+
if (this.options.pushRange) {
1882+
newValue = this.applyPushRange(newValue);
18971883
valueChanged = true;
1898-
} else if (this.tracking === 'highValue' && newValue < this.lowValue) {
1899-
if (this.options.noSwitching && this.lowValue !== this.maxValue) {
1900-
newValue = this.applyMinMaxRange(this.lowValue);
1884+
}
1885+
else {
1886+
newValue = this.applyMinMaxRange(newValue);
1887+
/* This is to check if we need to switch the min and max handles */
1888+
if (this.tracking === 'lowValue' && newValue > this.highValue) {
1889+
if (this.options.noSwitching && this.highValue !== this.minValue) {
1890+
newValue = this.applyMinMaxRange(this.highValue);
1891+
}
1892+
else {
1893+
this.lowValue = this.highValue;
1894+
this.applyLowValue();
1895+
this.updateHandles(this.tracking, this.maxH.rzsp);
1896+
this.updateAriaAttributes();
1897+
this.tracking = 'highValue';
1898+
this.minH.removeClass('rz-active');
1899+
this.maxH.addClass('rz-active');
1900+
if (this.options.keyboardSupport)
1901+
this.focusElement(this.maxH);
1902+
}
1903+
valueChanged = true;
19011904
}
1902-
else {
1903-
this.highValue = this.lowValue;
1904-
this.applyHighValue();
1905-
this.updateHandles(this.tracking, this.minH.rzsp);
1906-
this.updateAriaAttributes();
1907-
this.tracking = 'lowValue';
1908-
this.maxH.removeClass('rz-active');
1909-
this.minH.addClass('rz-active');
1910-
if (this.options.keyboardSupport)
1911-
this.focusElement(this.minH);
1905+
else if (this.tracking === 'highValue' && newValue < this.lowValue) {
1906+
if (this.options.noSwitching && this.lowValue !== this.maxValue) {
1907+
newValue = this.applyMinMaxRange(this.lowValue);
1908+
}
1909+
else {
1910+
this.highValue = this.lowValue;
1911+
this.applyHighValue();
1912+
this.updateHandles(this.tracking, this.minH.rzsp);
1913+
this.updateAriaAttributes();
1914+
this.tracking = 'lowValue';
1915+
this.maxH.removeClass('rz-active');
1916+
this.minH.addClass('rz-active');
1917+
if (this.options.keyboardSupport)
1918+
this.focusElement(this.minH);
1919+
}
1920+
valueChanged = true;
19121921
}
1913-
valueChanged = true;
19141922
}
19151923
}
19161924

@@ -1959,6 +1967,27 @@
19591967
return newValue;
19601968
},
19611969

1970+
applyPushRange: function(newValue) {
1971+
var difference = this.tracking === 'lowValue' ? this.highValue - newValue : newValue - this.lowValue,
1972+
range = this.options.minRange !== null ? this.options.minRange : this.options.step;
1973+
if (difference < range) {
1974+
if (this.tracking === 'lowValue') {
1975+
this.highValue = Math.min(newValue + range, this.maxValue);
1976+
newValue = this.highValue - range;
1977+
this.applyHighValue();
1978+
this.updateHandles('highValue', this.valueToOffset(this.highValue));
1979+
}
1980+
else {
1981+
this.lowValue = Math.max(newValue - range, this.minValue);
1982+
newValue = this.lowValue + range;
1983+
this.applyLowValue();
1984+
this.updateHandles('lowValue', this.valueToOffset(this.lowValue));
1985+
}
1986+
this.updateAriaAttributes();
1987+
}
1988+
return newValue;
1989+
},
1990+
19621991
/**
19631992
* Apply the model values using scope.$apply.
19641993
* We wrap it with the internalChange flag to avoid the watchers to be called

0 commit comments

Comments
 (0)