Skip to content

I
i20rzslider
Commit ce3487b0 authored by Steffen Wickham's avatar Steffen Wickham
Browse files
Options

feat(pointerColor): Adding feature for dynamic pointer color based on the value 

Changing the color of the pointer of a slider based on the value. Just pass a function to the
'pointerColor' option which returns a valid CSS color definition (either hex or named) and let the
pointer shine in the brightest colors
parent c6984774
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 175 additions and 8 deletions
README.md
View file @ ce3487b0
......@@ -182,6 +182,7 @@ The default options are:
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
......@@ -249,6 +250,8 @@ $scope.slider = {
**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.
**getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. To handle range slider pointer independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values. Indeed, when the function is called, there is no certainty that the model has already been updated.
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
**readOnly** - _Boolean (defaults to false)_: Set to true to make the slider read-only.
......
dist/rzslider.css
View file @ ce3487b0
/*! angularjs-slider - v2.7.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-02-06 */
2016-02-07 */
rzslider {
position: relative;
display: inline-block;
......
dist/rzslider.js
View file @ ce3487b0
/*! angularjs-slider - v2.7.1 -
(c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> -
https://github.com/angular-slider/angularjs-slider -
2016-02-06 */
2016-02-07 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -50,6 +50,7 @@
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
......@@ -889,6 +890,13 @@
);
this.setPosition(this.minLab, pos);
if (this.options.getPointerColor) {
var pointercolor = this.getPointerColor('min');
this.scope.minPointerStyle = {
backgroundColor: pointercolor
};
}
this.shFloorCeil();
},
......@@ -904,6 +912,13 @@
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
this.setPosition(this.maxLab, pos);
if (this.options.getPointerColor) {
var pointercolor = this.getPointerColor('max');
this.scope.maxPointerStyle = {
backgroundColor: pointercolor
};
}
this.shFloorCeil();
},
......@@ -1001,6 +1016,17 @@
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
},
/**
* Wrapper around the getPointerColor of the user to pass to
* correct parameters
*/
getPointerColor: function(pointerType) {
if ( pointerType === 'max' ) {
return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
}
return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
},
/**
* Update combined label position and value
*
......@@ -1697,7 +1723,7 @@
'use strict';
$templateCache.put('rzSliderTpl.html',
"<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 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=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
"<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\"></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 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=tick-value ng-attr-uib-tooltip=\"{{ t.valueTooltip }}\" ng-attr-tooltip-placement={{t.valueTooltipPlacement}}>{{ t.value }}</span></li></ul>"
);
}]);
......
dist/rzslider.min.css
View file @ ce3487b0
/*! angularjs-slider - v2.7.1 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-02-06 */
/*! angularjs-slider - v2.7.1 - (c) Rafal Zajac <rzajac@gmail.com>, Valentin Hervieu <valentin@hervieu.me>, Jussi Saarivirta <jusasi@gmail.com>, Angelin Sirbu <angelin.sirbu@gmail.com> - https://github.com/angular-slider/angularjs-slider - 2016-02-07 */
rzslider{position:relative;display:inline-block;width:100%;height:4px;margin:35px 0 15px 0;vertical-align:middle;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}rzslider[disabled]{cursor:not-allowed}rzslider[disabled] .rz-pointer{cursor:not-allowed;background-color:#d8e0f3}rzslider span{position:absolute;display:inline-block;white-space:nowrap}rzslider .rz-base{width:100%;height:100%;padding:0}rzslider .rz-bar-wrapper{left:0;z-index:1;width:100%;height:32px;padding-top:16px;margin-top:-16px;box-sizing:border-box}rzslider .rz-bar-wrapper.rz-draggable{cursor:move}rzslider .rz-bar{left:0;z-index:1;width:100%;height:4px;background:#d8e0f3;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-bar.rz-selection{z-index:2;background:#0db9f0;-webkit-border-radius:2px;-moz-border-radius:2px;border-radius:2px}rzslider .rz-pointer{top:-14px;z-index:3;width:32px;height:32px;cursor:pointer;background-color:#0db9f0;-webkit-border-radius:16px;-moz-border-radius:16px;border-radius:16px}rzslider .rz-pointer:after{position:absolute;top:12px;left:12px;width:8px;height:8px;background:#fff;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;content:''}rzslider .rz-pointer:hover:after{background-color:#fff}rzslider .rz-pointer.rz-active{z-index:4}rzslider .rz-pointer.rz-active:after{background-color:#451aff}rzslider .rz-bubble{bottom:16px;padding:1px 3px;color:#55637d;cursor:default}rzslider .rz-bubble.rz-selection{top:16px}rzslider .rz-bubble.rz-limit{color:#55637d}rzslider .rz-ticks{position:absolute;top:-3px;left:0;z-index:1;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100%;height:0;padding:0 11px;margin:0;list-style:none;box-sizing:border-box;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between}rzslider .rz-ticks .tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}rzslider .rz-ticks .tick.selected{background:#0db9f0}rzslider .rz-ticks .tick .tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}rzslider.vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}rzslider.vertical .rz-base{width:100%;height:100%;padding:0}rzslider.vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}rzslider.vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}rzslider.vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}rzslider.vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}rzslider.vertical .rz-bubble.rz-selection{top:auto;left:16px!important}rzslider.vertical .rz-ticks{top:0;left:-3px;z-index:1;width:0;height:100%;padding:11px 0;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse}rzslider.vertical .rz-ticks .tick{vertical-align:middle}rzslider.vertical .rz-ticks .tick .tick-value{top:auto;right:-30px;transform:translate(0,-28%)}
\ No newline at end of file
dist/rzslider.min.js
View file @ ce3487b0
This diff is collapsed.
src/rzSliderTpl.html
View file @ ce3487b0
......@@ -2,8 +2,8 @@
<span class="rz-bar-wrapper">
<span class="rz-bar rz-selection" ng-style="barStyle"></span>
</span> <!-- // 1 Highlight between two handles -->
<span class="rz-pointer"></span> <!-- // 2 Left slider handle -->
<span class="rz-pointer"></span> <!-- // 3 Right slider handle -->
<span class="rz-pointer rz-pointer-min" ng-style=minPointerStyle></span> <!-- // 2 Left slider handle -->
<span class="rz-pointer rz-pointer-max" ng-style=maxPointerStyle></span> <!-- // 3 Right slider handle -->
<span class="rz-bubble rz-limit"></span> <!-- // 4 Floor label -->
<span class="rz-bubble rz-limit"></span> <!-- // 5 Ceiling label -->
<span class="rz-bubble"></span> <!-- // 6 Label above left slider handle -->
......
src/rzslider.js
View file @ ce3487b0
......@@ -54,6 +54,7 @@
ticksValuesTooltip: null,
vertical: false,
selectionBarColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
enforceStep: true,
......@@ -893,6 +894,13 @@
);
this.setPosition(this.minLab, pos);
if (this.options.getPointerColor) {
var pointercolor = this.getPointerColor('min');
this.scope.minPointerStyle = {
backgroundColor: pointercolor
};
}
this.shFloorCeil();
},
......@@ -908,6 +916,13 @@
var pos = Math.min(newOffset - this.maxLab.rzsd / 2 + this.handleHalfDim, this.barDimension - this.maxLab.rzsd);
this.setPosition(this.maxLab, pos);
if (this.options.getPointerColor) {
var pointercolor = this.getPointerColor('max');
this.scope.maxPointerStyle = {
backgroundColor: pointercolor
};
}
this.shFloorCeil();
},
......@@ -1005,6 +1020,17 @@
return this.options.getSelectionBarColor(this.scope.rzSliderModel);
},
/**
* Wrapper around the getPointerColor of the user to pass to
* correct parameters
*/
getPointerColor: function(pointerType) {
if ( pointerType === 'max' ) {
return this.options.getPointerColor(this.scope.rzSliderHigh, pointerType);
}
return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
},
/**
* Update combined label position and value
*
......
tests/spec/rz-slider-service-test.js
View file @ ce3487b0
......@@ -587,6 +587,118 @@ describe('rzslider - ', function() {
$timeout.flush();
sliderConf.options.onEnd.calledWith('test').should.be.true;
});
it('should set the correct background-color on pointer for single slider', function() {
var sliderConf = {
value: 10,
options: {
floor: 0,
ceil: 10,
showSelectionBar: true,
getPointerColor: function(v) {
if (v < 5) return 'red';
return 'green';
}
}
};
createSlider(sliderConf);
var minHChild = angular.element(slider.minH[0]);
expect(minHChild.css('background-color')).to.equal('green');
scope.slider.value = 2;
scope.$digest();
expect(minHChild.css('background-color')).to.equal('red');
});
it('should set the correct background-color on pointer for range slider (simple rule)', function() {
var sliderConf = {
min: 2,
max: 8,
options: {
floor: 0,
ceil: 10,
getPointerColor: function(v) {
if (v < 5) return 'red';
return 'green';
}
}
};
createRangeSlider(sliderConf);
var minHChild = angular.element(slider.minH[0]),
maxHChild = angular.element(slider.maxH[0]);
expect(minHChild.css('background-color')).to.equal('red');
expect(maxHChild.css('background-color')).to.equal('green');
scope.slider.min = 6;
scope.slider.max = 7;
scope.$digest();
expect(minHChild.css('background-color')).to.equal('green');
expect(maxHChild.css('background-color')).to.equal('green');
});
it('should set the correct background-color on pointer for range slider (min/high independent rule 1)', function() {
var sliderConf = {
min: 2,
max: 8,
options: {
floor: 0,
ceil: 10,
getPointerColor: function(v, type) {
if ( type == 'min' ) {
if (v < 5) return 'red';
return 'green';
}
if ( type == 'max' ) {
if (v < 5) return 'blue';
return 'orange';
}
}
}
};
createRangeSlider(sliderConf);
var minHChild = angular.element(slider.minH[0]),
maxHChild = angular.element(slider.maxH[0]);
expect(minHChild.css('background-color')).to.equal('red');
expect(maxHChild.css('background-color')).to.equal('orange');
scope.slider.min = 6;
scope.$digest();
expect(minHChild.css('background-color')).to.equal('green');
});
it('should set the correct background-color on pointer for range slider (min/high independent rule 2)', function() {
var sliderConf = {
min: 2,
max: 8,
options: {
floor: 0,
ceil: 10,
getPointerColor: function(v, type) {
if ( type == 'min' ) {
if (v < 5) return 'red';
return 'green';
}
if ( type == 'max' ) {
if (v < 5) return 'blue';
return 'orange';
}
}
}
};
createRangeSlider(sliderConf);
var minHChild = angular.element(slider.minH[0]),
maxHChild = angular.element(slider.maxH[0]);
expect(minHChild.css('background-color')).to.equal('red');
expect(maxHChild.css('background-color')).to.equal('orange');
scope.slider.max = 3;
scope.$digest();
expect(minHChild.css('background-color')).to.equal('red');
expect(maxHChild.css('background-color')).to.equal('blue');
});
});
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment