Skip to content

Commit ac89ec2

Browse files
ValentinHValentinH
committed
Merge pull request #197 from rzajac/selection-bars-colors
Add a getSelectionBarColor options
2 parents 38da47f + 012ece9 commit ac89ec2

File tree

9 files changed

+95
-15
lines changed

9 files changed

+95
-15
lines changed

‎CHANGELOG.md

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,7 @@
1+
# 2.2.0 (not released yet)
2+
## Features
3+
- Add a `getSelectionBarColor` options to dynamically change the selection bar color (#197).
4+
15
# 2.1.0 (2015-11-29)
26
## Features
37
- Add a `vertical` options to display vertical sliders (#185).

‎README.md

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ Make sure the report is accompanied by a reproducible demo. The ideal demo is cr
3434

3535
## Common issues
3636
### My slider is not rendered correctly on load
37-
If the slider's parent element is not visible during slider initialization, the slider can't know when its parent becomes visible.
37+
If the slider's parent element is not visible during slider initialization, the slider can't know when its parent becomes visible.
3838
For instance, when displaying a slider inside an element which visibility is toggled using ng-show, you need to send an event to force it to redraw when you set your ng-show to true.
3939

4040
Here's an example of `refreshSlider` method that you should call whenever the slider becomes visible.
@@ -209,6 +209,8 @@ $scope.slider = {
209209

210210
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
211211

212+
**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.
213+
212214
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
213215

214216
**readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.

‎demo/demo.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,23 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
2525
}
2626
};
2727

28+
//Slider with selection bar
29+
$scope.color_slider_bar = {
30+
value: 12,
31+
options: {
32+
showSelectionBar: true,
33+
getSelectionBarColor: function(value) {
34+
if (value <= 3)
35+
return 'red';
36+
if (value <= 6)
37+
return 'orange';
38+
if (value <= 9)
39+
return 'yellow';
40+
return '#2AE02A';
41+
}
42+
}
43+
};
44+
2845
//Slider config with floor, ceil and step
2946
$scope.slider_floor_ceil = {
3047
value: 12,

‎demo/index.html

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -44,6 +44,14 @@ <h2>Slider with visible selection bar</h2>
4444
></rzslider>
4545
</article>
4646

47+
<article>
48+
<h2>Slider with dynamic selection bar colors</h2>
49+
<rzslider
50+
rz-slider-model="color_slider_bar.value"
51+
rz-slider-options="color_slider_bar.options"
52+
></rzslider>
53+
</article>
54+
4755
<article>
4856
<h2>Slider with custom floor/ceil/step</h2>
4957
<rzslider

‎dist/rzslider.js

Lines changed: 28 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
showTicksValues: false,
5151
ticksValuesTooltip: null,
5252
vertical: false,
53+
selectionBarColor: null,
5354
scale: 1,
5455
onStart: null,
5556
onChange: null,
@@ -432,6 +433,7 @@
432433
break;
433434
case 1:
434435
this.selBar = jElem;
436+
this.selBarChild = this.selBar.children('rz-selection');
435437
break;
436438
case 2:
437439
this.minH = jElem;
@@ -472,8 +474,8 @@
472474
this.cmbLab.rzsp = 0;
473475
},
474476

475-
/** Update each elements style based on options
476-
*
477+
/**
478+
* Update each elements style based on options
477479
*/
478480
manageElementsStyle: function() {
479481

@@ -662,9 +664,14 @@
662664
this.scope.ticks = [];
663665
for (var i = 0; i < ticksCount; i++) {
664666
var value = this.roundStep(this.minValue + i * this.step);
665-
var tick = {
667+
var tick =   {
666668
selected: this.isTickSelected(value)
667669
};
670+
if (tick.selected && this.options.getSelectionBarColor) {
671+
tick.style = {
672+
'background-color': this.getSelectionBarColor()
673+
};
674+
}
668675
if (this.options.showTicksValues) {
669676
tick.value = this.getDisplayValue(value);
670677
if (this.options.ticksValuesTooltip) {
@@ -863,6 +870,22 @@
863870
updateSelectionBar: function() {
864871
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
865872
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
873+
if (this.options.getSelectionBarColor) {
874+
var color = this.getSelectionBarColor();
875+
this.scope.barStyle = {
876+
backgroundColor: color
877+
};
878+
}
879+
},
880+
881+
/**
882+
* Wrapper around the getSelectionBarColor of the user to pass to
883+
* correct parameters
884+
*/
885+
getSelectionBarColor: function() {
886+
if (this.range)
887+
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
888+
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
866889
},
867890

868891
/**
@@ -1305,7 +1328,7 @@
13051328
valueChanged = true;
13061329
}
13071330

1308-
if(valueChanged) {
1331+
if (valueChanged) {
13091332
this.scope.$apply();
13101333
this.callOnChange();
13111334
}
@@ -1428,7 +1451,7 @@
14281451
'use strict';
14291452

14301453
$templateCache.put('rzSliderTpl.html',
1431-
"<span class=rz-bar-wrapper><span class=rz-bar></span></span> <span class=rz-bar-wrapper><span class=\"rz-bar rz-selection\"></span></span> <span class=rz-pointer></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks\" class=tick ng-class=\"{selected: t.selected}\"><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ t.value }}</span></li></ul>"
1454+
"<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></span> <span class=rz-pointer></span> <span class=\"rz-bubble rz-limit\"></span> <span class=\"rz-bubble rz-limit\"></span> <span class=rz-bubble></span> <span class=rz-bubble></span> <span class=rz-bubble></span><ul ng-show=showTicks class=rz-ticks><li ng-repeat=\"t in ticks track by $index\" class=tick ng-class=\"{selected: t.selected}\" ng-style=t.style><span ng-if=\"t.value != null && t.tooltip == null\" class=tick-value>{{ t.value }}</span> <span ng-if=\"t.value != null && t.tooltip != null\" class=tick-value uib-tooltip=\"{{ t.tooltip }}\" tooltip-placement={{t.tooltipPlacement}}>{{ t.value }}</span></li></ul>"
14321455
);
14331456

14341457
}]);

‎dist/rzslider.min.css

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

‎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/rzSliderTpl.html

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,7 @@
11
<span class="rz-bar-wrapper"><span class="rz-bar"></span></span> <!-- // 0 The slider bar -->
2-
<span class="rz-bar-wrapper"><span class="rz-bar rz-selection"></span></span> <!-- // 1 Highlight between two handles -->
2+
<span class="rz-bar-wrapper">
3+
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
4+
</span> <!-- // 1 Highlight between two handles -->
35
<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
46
<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
57
<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
@@ -8,7 +10,8 @@
810
<span class="rz-bubble"></span> <!-- // 7 Label above right slider handle -->
911
<span class="rz-bubble"></span> <!-- // 8 Range label when the slider handles are close ex. 15 - 17 -->
1012
<ul ng-show="showTicks" class="rz-ticks"> <!-- // 9 The ticks -->
11-
<li ng-repeat="t in ticks" class="tick" ng-class="{selected: t.selected}">
13+
<li ng-repeat="t in ticks track by $index" class="tick" ng-class="{selected: t.selected}"
14+
ng-style="t.style">
1215
<span ng-if="t.value != null && t.tooltip == null" class="tick-value">{{ t.value }}</span>
1316
<span ng-if="t.value != null && t.tooltip != null" class="tick-value"
1417
uib-tooltip="{{ t.tooltip }}" tooltip-placement="{{t.tooltipPlacement}}">{{ t.value }}</span>

‎src/rzslider.js

Lines changed: 27 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,7 @@
5050
showTicksValues: false,
5151
ticksValuesTooltip: null,
5252
vertical: false,
53+
selectionBarColor: null,
5354
scale: 1,
5455
onStart: null,
5556
onChange: null,
@@ -432,6 +433,7 @@
432433
break;
433434
case 1:
434435
this.selBar = jElem;
436+
this.selBarChild = this.selBar.children('rz-selection');
435437
break;
436438
case 2:
437439
this.minH = jElem;
@@ -472,8 +474,8 @@
472474
this.cmbLab.rzsp = 0;
473475
},
474476

475-
/** Update each elements style based on options
476-
*
477+
/**
478+
* Update each elements style based on options
477479
*/
478480
manageElementsStyle: function() {
479481

@@ -662,9 +664,14 @@
662664
this.scope.ticks = [];
663665
for (var i = 0; i < ticksCount; i++) {
664666
var value = this.roundStep(this.minValue + i * this.step);
665-
var tick = {
667+
var tick =   {
666668
selected: this.isTickSelected(value)
667669
};
670+
if (tick.selected && this.options.getSelectionBarColor) {
671+
tick.style = {
672+
'background-color': this.getSelectionBarColor()
673+
};
674+
}
668675
if (this.options.showTicksValues) {
669676
tick.value = this.getDisplayValue(value);
670677
if (this.options.ticksValuesTooltip) {
@@ -863,6 +870,22 @@
863870
updateSelectionBar: function() {
864871
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
865872
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
873+
if (this.options.getSelectionBarColor) {
874+
var color = this.getSelectionBarColor();
875+
this.scope.barStyle = {
876+
backgroundColor: color
877+
};
878+
}
879+
},
880+
881+
/**
882+
* Wrapper around the getSelectionBarColor of the user to pass to
883+
* correct parameters
884+
*/
885+
getSelectionBarColor: function() {
886+
if (this.range)
887+
return this.options.getSelectionBarColor(this.scope.rzSliderModel, this.scope.rzSliderHigh);
888+
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
866889
},
867890

868891
/**
@@ -1305,7 +1328,7 @@
13051328
valueChanged = true;
13061329
}
13071330

1308-
if(valueChanged) {
1331+
if (valueChanged) {
13091332
this.scope.$apply();
13101333
this.callOnChange();
13111334
}

0 commit comments

Comments
 (0)