Skip to content

I
i20rzslider
Commit b29b7c2a authored by amit777's avatar amit777 Committed by Valentin Hervieu
Browse files
Options

Added test for new tick colors (#372) 

* feat(directive): Add function to customize color of ticks

Pass a custom function to the slider options to allow for dynamic tick color determination
parent be651967
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 83 additions and 5 deletions
README.md
View file @ b29b7c2a
......@@ -223,6 +223,7 @@ The default options are:
ticksValuesTooltip: null,
vertical: false,
getSelectionBarColor: null,
getTickColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
......@@ -318,6 +319,8 @@ Just pass an array with each slider value and that's it; the floor, ceil and ste
**getSelectionBarColor** - _Function(value) or Function(minVal, maxVal) (defaults to null)_: Function that returns the current color of the selection bar. *If your color won't changed, don't use this option but set it through CSS.* 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.
**getTickColor** - _Function(value) (defaults to null)_: Function that returns the color of a tick. showTicks must be enabled.
**getPointerColor** - _Function(value, pointerType) (defaults to null)_: Function that returns the current color of a pointer. *If your color won't changed, don't use this option but set it through CSS.* 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. To handle range slider pointers independently, you should evaluate pointerType within the given function where "min" stands for `rzScopeModel` and "max" for `rzScopeHigh` values.
**hidePointerLabels** - _Boolean (defaults to false)_: Set to true to hide pointer labels
......
demo/demo.js
View file @ b29b7c2a
......@@ -333,6 +333,24 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with custom tick formating
$scope.slider_custom_tick_format = {
value: 30,
options: {
ceil: 1000,
floor: 0,
showSelectionBar: true,
showTicks: true,
getTickColor: function(value){
if(value > 100){
return 'red';
}
return 'blue';
}
}
};
//Vertical sliders
$scope.verticalSlider1 = {
value: 0,
......
demo/index.html
View file @ b29b7c2a
......@@ -252,6 +252,14 @@
></rzslider>
</article>
<article>
<h2>Slider with custom tick formatting</h2>
<rzslider
rz-slider-model="slider_custom_tick_format.value"
rz-slider-options="slider_custom_tick_format.options"
></rzslider>
</article>
<article>
<h2>Vertical sliders</h2>
<div class="row vertical-sliders" style="margin: 20px;">
......
dist/rzslider.css
View file @ b29b7c2a
/*! angularjs-slider - v5.3.0 -
(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-07-11 */
2016-07-12 */
.rzslider {
position: relative;
display: inline-block;
......
dist/rzslider.js
View file @ b29b7c2a
/*! angularjs-slider - v5.3.0 -
(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-07-11 */
2016-07-12 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -57,6 +57,7 @@
ticksValuesTooltip: null,
vertical: false,
getSelectionBarColor: null,
getTickColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
......@@ -932,6 +933,11 @@
'background-color': this.getSelectionBarColor()
};
}
if(!tick.selected && this.options.getTickColor){
tick.style = {
'background-color': this.getTickColor(value)
}
}
if (this.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
......@@ -1214,6 +1220,14 @@
return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
},
/**
* Wrapper around the getTickColor of the user to pass to
* correct parameters
*/
getTickColor: function(value) {
return this.options.getTickColor(value);
},
/**
* Update combined label position and value
*
......
dist/rzslider.min.css
View file @ b29b7c2a
/*! angularjs-slider - v5.3.0 - (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-07-11 */
/*! angularjs-slider - v5.3.0 - (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-07-12 */
.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.with-legend{margin-bottom:40px}.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 .rz-tick{width:10px;height:10px;text-align:center;cursor:pointer;background:#d8e0f3;border-radius:50%}.rzslider .rz-ticks .rz-tick.rz-selected{background:#0db9f0}.rzslider .rz-ticks .rz-tick .rz-tick-value{position:absolute;top:-30px;transform:translate(-50%,0)}.rzslider .rz-ticks .rz-tick .rz-tick-legend{position:absolute;top:24px;max-width:50px;white-space:normal;transform:translate(-50%,0)}.rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value{top:initial;bottom:-40px}.rzslider.rz-vertical{position:relative;width:4px;height:100%;padding:0;margin:0 20px;vertical-align:baseline}.rzslider.rz-vertical .rz-base{width:100%;height:100%;padding:0}.rzslider.rz-vertical .rz-bar-wrapper{top:auto;left:0;width:32px;height:100%;padding:0 0 0 16px;margin:0 0 0 -16px}.rzslider.rz-vertical .rz-bar{bottom:0;left:auto;width:4px;height:100%}.rzslider.rz-vertical .rz-pointer{top:auto;bottom:0;left:-14px!important}.rzslider.rz-vertical .rz-bubble{bottom:0;left:16px!important;margin-left:3px}.rzslider.rz-vertical .rz-bubble.rz-selection{top:auto;left:16px!important}.rzslider.rz-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.rz-vertical .rz-ticks .rz-tick{vertical-align:middle}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value{top:initial;left:22px;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-legend{top:initial;right:24px;max-width:none;white-space:nowrap;transform:translate(0,-28%)}.rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value{right:12px;bottom:initial;left:initial}
\ No newline at end of file
dist/rzslider.min.js
View file @ b29b7c2a
This diff is collapsed.
src/rzslider.js
View file @ b29b7c2a
......@@ -61,6 +61,7 @@
ticksValuesTooltip: null,
vertical: false,
getSelectionBarColor: null,
getTickColor: null,
getPointerColor: null,
keyboardSupport: true,
scale: 1,
......@@ -936,6 +937,11 @@
'background-color': this.getSelectionBarColor()
};
}
if(!tick.selected && this.options.getTickColor){
tick.style = {
'background-color': this.getTickColor(value)
}
}
if (this.options.ticksTooltip) {
tick.tooltip = this.options.ticksTooltip(value);
tick.tooltipPlacement = this.options.vertical ? 'right' : 'top';
......@@ -1218,6 +1224,14 @@
return this.options.getPointerColor(this.scope.rzSliderModel, pointerType);
},
/**
* Wrapper around the getTickColor of the user to pass to
* correct parameters
*/
getTickColor: function(value) {
return this.options.getTickColor(value);
},
/**
* Update combined label position and value
*
......
tests/specs/options-handling-test.js
View file @ b29b7c2a
......@@ -639,6 +639,27 @@
});
it('should set the correct background-color on tick', function() {
var sliderConf = {
value: 3,
options: {
floor: 0,
ceil: 10,
showTicks: true,
getTickColor: function(v) {
if (v < 5) return 'red';
return 'green';
}
}
};
helper.createRangeSlider(sliderConf);
expect(helper.element[0].querySelectorAll('.rz-tick')).to.have.length(11);
var firstTick = angular.element(helper.element[0].querySelectorAll('.rz-tick')[0]);
var lastTick = angular.element(helper.element[0].querySelectorAll('.rz-tick')[10]);
expect(firstTick[0].style['background-color']).to.equal('red');
expect(lastTick[0].style['background-color']).to.equal('green');
});
it('should set the correct position for labels for single slider with boundPointerLabels=false', function() {
var sliderConf = {
min: 100000000,
......
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