Skip to content

Commit 2d9628e

Browse files
author
Valentin Hervieu
committed
feat(selectionBar): Add a showSelectionBarFromValue
1 parent 7e9c22c commit 2d9628e

File tree

8 files changed

+222
-19
lines changed

8 files changed

+222
-19
lines changed

‎CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 2.7.0 (not released)
2+
## Features
3+
- Add a `showSelectionBarFromValue` options (#250).
4+
15
# 2.6.0 (2016-01-31)
26
## Features
37
- Add a `noSwitching` option to prevent the user from switching the min and max handles (#233).

‎README.md‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -171,6 +171,7 @@ The default options are:
171171
draggableRangeOnly: false,
172172
showSelectionBar: false,
173173
showSelectionBarEnd: false,
174+
showSelectionBarFromValue: null,
174175
hideLimitLabels: false,
175176
readOnly: false,
176177
disabled: false,
@@ -235,6 +236,8 @@ $scope.slider = {
235236

236237
**showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after the slider handle.
237238

239+
**showSelectionBarFromValue** - _Number (defaults to null)_: Set a number to draw the selection bar between this value and the slider handle.
240+
238241
**getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. If the returned color depends on a model value (either `rzScopeModel`or `'rzSliderHigh`), you should use the argument passed to the function. Indeed, when the function is called, there is no certainty that the model has already been updated.
239242

240243
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels

‎demo/demo.js‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -58,6 +58,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
5858
}
5959
};
6060

61+
//Slider with selection bar from value
62+
$scope.slider_visible_bar_from_value = {
63+
value: 10,
64+
options: {
65+
floor: -100,
66+
ceil: 100,
67+
step: 10,
68+
showSelectionBarFromValue: 0
69+
}
70+
};
71+
6172
//Slider with selection bar
6273
$scope.color_slider_bar = {
6374
value: 12,

‎demo/index.html‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -70,6 +70,14 @@ <h2>Slider with visible selection bar at the end</h2>
7070
></rzslider>
7171
</article>
7272

73+
<article>
74+
<h2>Slider with visible selection bar from a value</h2>
75+
<rzslider
76+
rz-slider-model="slider_visible_bar_from_value.value"
77+
rz-slider-options="slider_visible_bar_from_value.options"
78+
></rzslider>
79+
</article>
80+
7381
<article>
7482
<h2>Slider with dynamic selection bar colors</h2>
7583
<rzslider

‎dist/rzslider.js‎

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.6.0 -
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-
2016-01-31 */
4+
2016-02-03 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -39,6 +39,7 @@
3939
draggableRangeOnly: false,
4040
showSelectionBar: false,
4141
showSelectionBarEnd: false,
42+
showSelectionBarFromValue: null,
4243
hideLimitLabels: false,
4344
readOnly: false,
4445
disabled: false,
@@ -406,7 +407,8 @@
406407
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
407408
this.scope.showTicks = this.options.showTicks; //scope is used in the template
408409

409-
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
410+
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
411+
|| this.options.showSelectionBarFromValue !== null;
410412

411413
if (this.options.stepsArray) {
412414
this.options.floor = 0;
@@ -762,8 +764,21 @@
762764
},
763765

764766
isTickSelected: function(value) {
765-
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
766-
return true;
767+
if (!this.range) {
768+
if (this.options.showSelectionBarFromValue !== null) {
769+
var center = this.options.showSelectionBarFromValue;
770+
if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
771+
return true;
772+
else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
773+
return true;
774+
}
775+
else if (this.options.showSelectionBarEnd) {
776+
if (value >= this.scope.rzSliderModel)
777+
return true;
778+
}
779+
else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
780+
return true;
781+
}
767782
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
768783
return true;
769784
return false;
@@ -932,13 +947,31 @@
932947
updateSelectionBar: function() {
933948
var position = 0,
934949
dimension = 0;
935-
if (this.range || !this.options.showSelectionBarEnd) {
936-
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
937-
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
938-
} else {
939-
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
950+
if(this.range) {
951+
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
940952
position = this.minH.rzsp + this.handleHalfDim;
941953
}
954+
else {
955+
if (this.options.showSelectionBarFromValue !== null) {
956+
var center = this.options.showSelectionBarFromValue,
957+
centerPosition = this.valueToOffset(center);
958+
if (this.scope.rzSliderModel > center) {
959+
dimension = this.minH.rzsp - centerPosition;
960+
position = centerPosition + this.handleHalfDim;
961+
}
962+
else {
963+
dimension = centerPosition - this.minH.rzsp;
964+
position = this.minH.rzsp + this.handleHalfDim;
965+
}
966+
}
967+
else if (this.options.showSelectionBarEnd) {
968+
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
969+
position = this.minH.rzsp + this.handleHalfDim;
970+
} else {
971+
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
972+
position = 0;
973+
}
974+
}
942975
this.setDimension(this.selBar, dimension);
943976
this.setPosition(this.selBar, position);
944977
if (this.options.getSelectionBarColor) {

‎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: 41 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,7 @@
4343
draggableRangeOnly: false,
4444
showSelectionBar: false,
4545
showSelectionBarEnd: false,
46+
showSelectionBarFromValue: null,
4647
hideLimitLabels: false,
4748
readOnly: false,
4849
disabled: false,
@@ -410,7 +411,8 @@
410411
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
411412
this.scope.showTicks = this.options.showTicks; //scope is used in the template
412413

413-
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
414+
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
415+
|| this.options.showSelectionBarFromValue !== null;
414416

415417
if (this.options.stepsArray) {
416418
this.options.floor = 0;
@@ -766,8 +768,21 @@
766768
},
767769

768770
isTickSelected: function(value) {
769-
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
770-
return true;
771+
if (!this.range) {
772+
if (this.options.showSelectionBarFromValue !== null) {
773+
var center = this.options.showSelectionBarFromValue;
774+
if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
775+
return true;
776+
else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
777+
return true;
778+
}
779+
else if (this.options.showSelectionBarEnd) {
780+
if (value >= this.scope.rzSliderModel)
781+
return true;
782+
}
783+
else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
784+
return true;
785+
}
771786
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
772787
return true;
773788
return false;
@@ -936,13 +951,31 @@
936951
updateSelectionBar: function() {
937952
var position = 0,
938953
dimension = 0;
939-
if (this.range || !this.options.showSelectionBarEnd) {
940-
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
941-
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
942-
} else {
943-
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
954+
if(this.range) {
955+
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
944956
position = this.minH.rzsp + this.handleHalfDim;
945957
}
958+
else {
959+
if (this.options.showSelectionBarFromValue !== null) {
960+
var center = this.options.showSelectionBarFromValue,
961+
centerPosition = this.valueToOffset(center);
962+
if (this.scope.rzSliderModel > center) {
963+
dimension = this.minH.rzsp - centerPosition;
964+
position = centerPosition + this.handleHalfDim;
965+
}
966+
else {
967+
dimension = centerPosition - this.minH.rzsp;
968+
position = this.minH.rzsp + this.handleHalfDim;
969+
}
970+
}
971+
else if (this.options.showSelectionBarEnd) {
972+
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
973+
position = this.minH.rzsp + this.handleHalfDim;
974+
} else {
975+
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
976+
position = 0;
977+
}
978+
}
946979
this.setDimension(this.selBar, dimension);
947980
this.setPosition(this.selBar, position);
948981
if (this.options.getSelectionBarColor) {

‎tests/spec/rz-slider-service-test.js‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -432,6 +432,38 @@ describe('rzslider - ', function() {
432432
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
433433
});
434434

435+
it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the right', function() {
436+
var sliderConf = {
437+
value: 15,
438+
options: {
439+
floor: 0,
440+
ceil: 20,
441+
showSelectionBarFromValue: 10
442+
}
443+
};
444+
createSlider(sliderConf);
445+
var expectedDimension = slider.valueToOffset(5),
446+
expectedPosition = slider.valueToOffset(10) + slider.handleHalfDim;
447+
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
448+
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
449+
});
450+
451+
it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the left', function() {
452+
var sliderConf = {
453+
value: 3,
454+
options: {
455+
floor: 0,
456+
ceil: 20,
457+
showSelectionBarFromValue: 10
458+
}
459+
};
460+
createSlider(sliderConf);
461+
var expectedDimension = slider.valueToOffset(7),
462+
expectedPosition = slider.valueToOffset(3) + slider.handleHalfDim;
463+
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
464+
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
465+
});
466+
435467
it('should set the correct background-color on selection bar for single slider', function() {
436468
var sliderConf = {
437469
value: 10,
@@ -861,6 +893,85 @@ describe('rzslider - ', function() {
861893
expect(lastTick.hasClass('selected')).to.be.false;
862894
});
863895

896+
it('should set selected class to ticks above the model value if showSelectionBarEnd is true', function() {
897+
var sliderConf = {
898+
value: 50,
899+
options: {
900+
floor: 0,
901+
ceil: 100,
902+
step: 10,
903+
showTicks: true,
904+
showSelectionBarEnd: true
905+
}
906+
};
907+
createSlider(sliderConf);
908+
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
909+
expect(firstTick.hasClass('selected')).to.be.false;
910+
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
911+
expect(fifthTick.hasClass('selected')).to.be.false;
912+
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
913+
expect(sixthTick.hasClass('selected')).to.be.true;
914+
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
915+
expect(seventhTick.hasClass('selected')).to.be.true;
916+
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
917+
expect(lastTick.hasClass('selected')).to.be.true;
918+
});
919+
920+
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the right', function() {
921+
var sliderConf = {
922+
value: 50,
923+
options: {
924+
floor: 0,
925+
ceil: 100,
926+
step: 10,
927+
showTicks: true,
928+
showSelectionBarFromValue: 30
929+
}
930+
};
931+
createSlider(sliderConf);
932+
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
933+
expect(firstTick.hasClass('selected')).to.be.false;
934+
var thirdTick = angular.element(element[0].querySelectorAll('.tick')[2]);
935+
expect(thirdTick.hasClass('selected')).to.be.false;
936+
var fourthTick = angular.element(element[0].querySelectorAll('.tick')[3]);
937+
expect(fourthTick.hasClass('selected')).to.be.true;
938+
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
939+
expect(fifthTick.hasClass('selected')).to.be.true;
940+
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
941+
expect(sixthTick.hasClass('selected')).to.be.true;
942+
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
943+
expect(seventhTick.hasClass('selected')).to.be.false;
944+
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
945+
expect(lastTick.hasClass('selected')).to.be.false;
946+
});
947+
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the left', function() {
948+
var sliderConf = {
949+
value: 50,
950+
options: {
951+
floor: 0,
952+
ceil: 100,
953+
step: 10,
954+
showTicks: true,
955+
showSelectionBarFromValue: 70
956+
}
957+
};
958+
createSlider(sliderConf);
959+
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
960+
expect(firstTick.hasClass('selected')).to.be.false;
961+
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
962+
expect(fifthTick.hasClass('selected')).to.be.false;
963+
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
964+
expect(sixthTick.hasClass('selected')).to.be.true;
965+
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
966+
expect(seventhTick.hasClass('selected')).to.be.true;
967+
var eighthTick = angular.element(element[0].querySelectorAll('.tick')[7]);
968+
expect(eighthTick.hasClass('selected')).to.be.true;
969+
var ninthTick = angular.element(element[0].querySelectorAll('.tick')[8]);
970+
expect(ninthTick.hasClass('selected')).to.be.false;
971+
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
972+
expect(lastTick.hasClass('selected')).to.be.false;
973+
});
974+
864975
it('should set selected class to ticks between min/max if showSelectionBar is true on range slider', function() {
865976
var sliderConf = {
866977
min: 40,

0 commit comments

Comments
 (0)