Skip to content

I
i20rzslider
Commit dc0217e9 authored by Valentin Hervieu's avatar Valentin Hervieu
Browse files
Options

Merge pull request #250 from angular-slider/showSelectionBarFromValue 

feat(selectionBar): Add a showSelectionBarFromValue
parents 7e9c22cc 2d9628ec
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 222 additions and 19 deletions
CHANGELOG.md
View file @ dc0217e9
# 2.7.0 (not released)
## Features
- Add a `showSelectionBarFromValue` options (#250).
# 2.6.0 (2016-01-31)
## Features
- Add a `noSwitching` option to prevent the user from switching the min and max handles (#233).
......
README.md
View file @ dc0217e9
......@@ -171,6 +171,7 @@ The default options are:
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showSelectionBarFromValue: null,
hideLimitLabels: false,
readOnly: false,
disabled: false,
......@@ -235,6 +236,8 @@ $scope.slider = {
**showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after the slider handle.
**showSelectionBarFromValue** - _Number (defaults to null)_: Set a number to draw the selection bar between this value and the slider handle.
**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.
**hideLimitLabels** - _Boolean (defaults to false)_: Set to true to hide min / max labels
......
demo/demo.js
View file @ dc0217e9
......@@ -58,6 +58,17 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
}
};
//Slider with selection bar from value
$scope.slider_visible_bar_from_value = {
value: 10,
options: {
floor: -100,
ceil: 100,
step: 10,
showSelectionBarFromValue: 0
}
};
//Slider with selection bar
$scope.color_slider_bar = {
value: 12,
......
demo/index.html
View file @ dc0217e9
......@@ -70,6 +70,14 @@
></rzslider>
</article>
<article>
<h2>Slider with visible selection bar from a value</h2>
<rzslider
rz-slider-model="slider_visible_bar_from_value.value"
rz-slider-options="slider_visible_bar_from_value.options"
></rzslider>
</article>
<article>
<h2>Slider with dynamic selection bar colors</h2>
<rzslider
......
dist/rzslider.js
View file @ dc0217e9
/*! angularjs-slider - v2.6.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-01-31 */
2016-02-03 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -39,6 +39,7 @@
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showSelectionBarFromValue: null,
hideLimitLabels: false,
readOnly: false,
disabled: false,
......@@ -406,7 +407,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null;
if (this.options.stepsArray) {
this.options.floor = 0;
......@@ -762,8 +764,21 @@
},
isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (!this.range) {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue;
if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
return true;
else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBarEnd) {
if (value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
}
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
......@@ -932,13 +947,31 @@
updateSelectionBar: function() {
var position = 0,
dimension = 0;
if (this.range || !this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
} else {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
if(this.range) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
}
else {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue,
centerPosition = this.valueToOffset(center);
if (this.scope.rzSliderModel > center) {
dimension = this.minH.rzsp - centerPosition;
position = centerPosition + this.handleHalfDim;
}
else {
dimension = centerPosition - this.minH.rzsp;
position = this.minH.rzsp + this.handleHalfDim;
}
}
else if (this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
} else {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = 0;
}
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
......
dist/rzslider.min.js
View file @ dc0217e9
This diff is collapsed.
src/rzslider.js
View file @ dc0217e9
......@@ -43,6 +43,7 @@
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
showSelectionBarFromValue: null,
hideLimitLabels: false,
readOnly: false,
disabled: false,
......@@ -410,7 +411,8 @@
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
this.scope.showTicks = this.options.showTicks; //scope is used in the template
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
|| this.options.showSelectionBarFromValue !== null;
if (this.options.stepsArray) {
this.options.floor = 0;
......@@ -766,8 +768,21 @@
},
isTickSelected: function(value) {
if (!this.range && this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
if (!this.range) {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue;
if (this.scope.rzSliderModel > center && value >= center && value <= this.scope.rzSliderModel)
return true;
else if (this.scope.rzSliderModel < center && value <= center && value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBarEnd) {
if (value >= this.scope.rzSliderModel)
return true;
}
else if (this.options.showSelectionBar && value <= this.scope.rzSliderModel)
return true;
}
if (this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
return true;
return false;
......@@ -936,13 +951,31 @@
updateSelectionBar: function() {
var position = 0,
dimension = 0;
if (this.range || !this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
} else {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
if(this.range) {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
}
else {
if (this.options.showSelectionBarFromValue !== null) {
var center = this.options.showSelectionBarFromValue,
centerPosition = this.valueToOffset(center);
if (this.scope.rzSliderModel > center) {
dimension = this.minH.rzsp - centerPosition;
position = centerPosition + this.handleHalfDim;
}
else {
dimension = centerPosition - this.minH.rzsp;
position = this.minH.rzsp + this.handleHalfDim;
}
}
else if (this.options.showSelectionBarEnd) {
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim;
position = this.minH.rzsp + this.handleHalfDim;
} else {
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim;
position = 0;
}
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
......
tests/spec/rz-slider-service-test.js
View file @ dc0217e9
......@@ -432,6 +432,38 @@ describe('rzslider - ', function() {
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
});
it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the right', function() {
var sliderConf = {
value: 15,
options: {
floor: 0,
ceil: 20,
showSelectionBarFromValue: 10
}
};
createSlider(sliderConf);
var expectedDimension = slider.valueToOffset(5),
expectedPosition = slider.valueToOffset(10) + slider.handleHalfDim;
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
});
it('should set the correct dimension/position for selection bar for single slider with showSelectionBarFromValue is used with a value on the left', function() {
var sliderConf = {
value: 3,
options: {
floor: 0,
ceil: 20,
showSelectionBarFromValue: 10
}
};
createSlider(sliderConf);
var expectedDimension = slider.valueToOffset(7),
expectedPosition = slider.valueToOffset(3) + slider.handleHalfDim;
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
});
it('should set the correct background-color on selection bar for single slider', function() {
var sliderConf = {
value: 10,
......@@ -861,6 +893,85 @@ describe('rzslider - ', function() {
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set selected class to ticks above the model value if showSelectionBarEnd is true', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarEnd: true
}
};
createSlider(sliderConf);
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.false;
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.true;
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.true;
});
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the right', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarFromValue: 30
}
};
createSlider(sliderConf);
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var thirdTick = angular.element(element[0].querySelectorAll('.tick')[2]);
expect(thirdTick.hasClass('selected')).to.be.false;
var fourthTick = angular.element(element[0].querySelectorAll('.tick')[3]);
expect(fourthTick.hasClass('selected')).to.be.true;
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.true;
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.false;
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set selected class to correct ticks if showSelectionBarFromValue is used and the model is on the left', function() {
var sliderConf = {
value: 50,
options: {
floor: 0,
ceil: 100,
step: 10,
showTicks: true,
showSelectionBarFromValue: 70
}
};
createSlider(sliderConf);
var firstTick = angular.element(element[0].querySelectorAll('.tick')[0]);
expect(firstTick.hasClass('selected')).to.be.false;
var fifthTick = angular.element(element[0].querySelectorAll('.tick')[4]);
expect(fifthTick.hasClass('selected')).to.be.false;
var sixthTick = angular.element(element[0].querySelectorAll('.tick')[5]);
expect(sixthTick.hasClass('selected')).to.be.true;
var seventhTick = angular.element(element[0].querySelectorAll('.tick')[6]);
expect(seventhTick.hasClass('selected')).to.be.true;
var eighthTick = angular.element(element[0].querySelectorAll('.tick')[7]);
expect(eighthTick.hasClass('selected')).to.be.true;
var ninthTick = angular.element(element[0].querySelectorAll('.tick')[8]);
expect(ninthTick.hasClass('selected')).to.be.false;
var lastTick = angular.element(element[0].querySelectorAll('.tick')[10]);
expect(lastTick.hasClass('selected')).to.be.false;
});
it('should set selected class to ticks between min/max if showSelectionBar is true on range slider', function() {
var sliderConf = {
min: 40,
......
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