Skip to content

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

Merge pull request #214 from angular-slider/showSelectionBarEnd 

feat(selectionBar): Add a showSelectionBarEnd option
parents 2d224dd9 f7512437
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 98 additions and 8 deletions
README.md
View file @ 6dd0ebe0
......@@ -162,6 +162,7 @@ The default options are:
draggableRange: false,
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
hideLimitLabels: false,
readOnly: false,
disabled: false,
......@@ -219,7 +220,9 @@ $scope.slider = {
**draggableRangeOnly** - _Boolean (defaults to false)_: Same as draggableRange but the slider range can't be changed.
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar before the slider handle.
**showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after 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.
......
demo/demo.js
View file @ 6dd0ebe0
......@@ -13,6 +13,14 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
showSelectionBar: true
}
};
//Slider with selection bar end
$scope.slider_visible_bar_end = {
value: 10,
options: {
ceil: 100,
showSelectionBarEnd: true
}
};
//Range slider config
$scope.minRangeSlider = {
......
demo/index.html
View file @ 6dd0ebe0
......@@ -44,6 +44,14 @@
></rzslider>
</article>
<article>
<h2>Slider with visible selection bar at the end</h2>
<rzslider
rz-slider-model="slider_visible_bar_end.value"
rz-slider-options="slider_visible_bar_end.options"
></rzslider>
</article>
<article>
<h2>Slider with dynamic selection bar colors</h2>
<rzslider
......
dist/rzslider.js
View file @ 6dd0ebe0
/*! angularjs-slider - v2.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 -
2015-12-29 */
2015-12-30 */
/*jslint unparam: true */
/*global angular: false, console: false, define, module */
(function(root, factory) {
......@@ -37,6 +37,7 @@
draggableRange: false,
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
hideLimitLabels: false,
readOnly: false,
disabled: false,
......@@ -406,6 +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;
if (this.options.stepsArray) {
this.options.floor = 0;
this.options.ceil = this.options.stepsArray.length - 1;
......@@ -925,8 +928,17 @@
* @returns {undefined}
*/
updateSelectionBar: function() {
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
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
position = this.minH.rzsp + this.handleHalfDim;
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
var color = this.getSelectionBarColor();
this.scope.barStyle = {
......
dist/rzslider.min.js
View file @ 6dd0ebe0
This diff is collapsed.
src/rzslider.js
View file @ 6dd0ebe0
......@@ -41,6 +41,7 @@
draggableRange: false,
draggableRangeOnly: false,
showSelectionBar: false,
showSelectionBarEnd: false,
hideLimitLabels: false,
readOnly: false,
disabled: false,
......@@ -410,6 +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;
if (this.options.stepsArray) {
this.options.floor = 0;
this.options.ceil = this.options.stepsArray.length - 1;
......@@ -929,8 +932,17 @@
* @returns {undefined}
*/
updateSelectionBar: function() {
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
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
position = this.minH.rzsp + this.handleHalfDim;
}
this.setDimension(this.selBar, dimension);
this.setPosition(this.selBar, position);
if (this.options.getSelectionBarColor) {
var color = this.getSelectionBarColor();
this.scope.barStyle = {
......
tests/spec/rz-slider-service-test.js
View file @ 6dd0ebe0
......@@ -402,6 +402,37 @@ describe('rzslider - ', function() {
expect(slider.maxValue).to.equal(100);
});
it('should set the correct dimension/position for selection bar for single slider with showSelectionBar=true', function() {
var sliderConf = {
value: 2,
options: {
floor: 0,
ceil: 10,
showSelectionBar: true
}
};
createSlider(sliderConf);
var expectedDimension = slider.valueToOffset(2) + slider.handleHalfDim;
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
expect(slider.selBar.css('left')).to.equal('0px');
});
it('should set the correct dimension/position for selection bar for single slider with showSelectionBarEnd=true', function() {
var sliderConf = {
value: 2,
options: {
floor: 0,
ceil: 10,
showSelectionBarEnd: true
}
};
createSlider(sliderConf);
var expectedDimension = slider.valueToOffset(8) + slider.handleHalfDim,
expectedPosition = slider.valueToOffset(2) + 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,
......@@ -424,6 +455,22 @@ describe('rzslider - ', function() {
expect(selBarChild.css('background-color')).to.equal('red');
});
it('should set the correct dimension/position for selection bar for range slider', function() {
var sliderConf = {
min: 2,
max: 8,
options: {
floor: 0,
ceil: 10
}
};
createRangeSlider(sliderConf);
var expectedDimension = slider.valueToOffset(6) + slider.handleHalfDim,
expectedPosition = slider.valueToOffset(2) + 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 range slider', function() {
var sliderConf = {
min: 2,
......
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