Skip to content

Commit 484a6ec

Browse files
author
Valentin Hervieu
committed
Add a getSelectionBarColor options to dynamically change the selection bar color.
1 parent e4fd9b7 commit 484a6ec

File tree

7 files changed

+45
-4
lines changed

7 files changed

+45
-4
lines changed

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 (defaults to null)_: Function that returns the current color of the selection bar.
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: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,25 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
2525
}
2626
};
2727

28+
29+
//Slider with selection bar
30+
$scope.color_slider_bar = {
31+
value: 12,
32+
options: {
33+
showSelectionBar: true,
34+
getSelectionBarColor: function() {
35+
var currentValue = $scope.color_slider_bar.value;
36+
if (currentValue <= 3)
37+
return 'red';
38+
if (currentValue <= 6)
39+
return 'orange';
40+
if (currentValue <= 9)
41+
return 'yellow';
42+
return '#2AE02A';
43+
}
44+
}
45+
};
46+
2847
//Slider config with floor, ceil and step
2948
$scope.slider_floor_ceil = {
3049
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: 6 additions & 0 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,
@@ -431,6 +432,7 @@
431432
break;
432433
case 1:
433434
this.selBar = jElem;
435+
this.selBarChild = this.selBar.children('rz-selection');
434436
break;
435437
case 2:
436438
this.minH = jElem;
@@ -868,6 +870,10 @@
868870
updateSelectionBar: function() {
869871
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
870872
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
873+
if(this.options.getSelectionBarColor) {
874+
var color = this.options.getSelectionBarColor();
875+
this.selBarChild.css({backgroundColor: color});
876+
}
871877
},
872878

873879
/**

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/rzslider.js

Lines changed: 6 additions & 0 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,
@@ -431,6 +432,7 @@
431432
break;
432433
case 1:
433434
this.selBar = jElem;
435+
this.selBarChild = this.selBar.children('rz-selection');
434436
break;
435437
case 2:
436438
this.minH = jElem;
@@ -868,6 +870,10 @@
868870
updateSelectionBar: function() {
869871
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
870872
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
873+
if(this.options.getSelectionBarColor) {
874+
var color = this.options.getSelectionBarColor();
875+
this.selBarChild.css({backgroundColor: color});
876+
}
871877
},
872878

873879
/**

0 commit comments

Comments
 (0)