Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit f751243

Browse files
author
Valentin Hervieu
committed
feat(selectionBar): Add a showSelectionBarEnd option to display the selection bar after the value.
as requested in angular-slider#213
1 parent 2d224dd commit f751243

File tree

7 files changed

+98
-8
lines changed

7 files changed

+98
-8
lines changed

‎README.md

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -162,6 +162,7 @@ The default options are:
162162
draggableRange: false,
163163
draggableRangeOnly: false,
164164
showSelectionBar: false,
165+
showSelectionBarEnd: false,
165166
hideLimitLabels: false,
166167
readOnly: false,
167168
disabled: false,
@@ -219,7 +220,9 @@ $scope.slider = {
219220

220221
**draggableRangeOnly** - _Boolean (defaults to false)_: Same as draggableRange but the slider range can't be changed.
221222

222-
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar.
223+
**showSelectionBar** - _Boolean (defaults to false)_: Set to true to always show the selection bar before the slider handle.
224+
225+
**showSelectionBarEnd** - _Boolean (defaults to false)_: Set to true to always show the selection bar after the slider handle.
223226

224227
**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.
225228

‎demo/demo.js

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,14 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $modal) {
1313
showSelectionBar: true
1414
}
1515
};
16+
//Slider with selection bar end
17+
$scope.slider_visible_bar_end = {
18+
value: 10,
19+
options: {
20+
ceil: 100,
21+
showSelectionBarEnd: true
22+
}
23+
};
1624

1725
//Range slider config
1826
$scope.minRangeSlider = {

‎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 visible selection bar at the end</h2>
49+
<rzslider
50+
rz-slider-model="slider_visible_bar_end.value"
51+
rz-slider-options="slider_visible_bar_end.options"
52+
></rzslider>
53+
</article>
54+
4755
<article>
4856
<h2>Slider with dynamic selection bar colors</h2>
4957
<rzslider

‎dist/rzslider.js

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
/*! angularjs-slider - v2.3.0 -
22
(c) Rafal Zajac <[email protected]>, Valentin Hervieu <[email protected]>, Jussi Saarivirta <[email protected]>, Angelin Sirbu <[email protected]> -
33
https://github.com/angular-slider/angularjs-slider -
4-
2015-12-29 */
4+
2015-12-30 */
55
/*jslint unparam: true */
66
/*global angular: false, console: false, define, module */
77
(function(root, factory) {
@@ -37,6 +37,7 @@
3737
draggableRange: false,
3838
draggableRangeOnly: false,
3939
showSelectionBar: false,
40+
showSelectionBarEnd: false,
4041
hideLimitLabels: false,
4142
readOnly: false,
4243
disabled: false,
@@ -406,6 +407,8 @@
406407
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
407408
this.scope.showTicks = this.options.showTicks; //scope is used in the template
408409

410+
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
411+
409412
if (this.options.stepsArray) {
410413
this.options.floor = 0;
411414
this.options.ceil = this.options.stepsArray.length - 1;
@@ -925,8 +928,17 @@
925928
* @returns {undefined}
926929
*/
927930
updateSelectionBar: function() {
928-
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
929-
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
931+
var position = 0,
932+
dimension = 0;
933+
if (this.range || !this.options.showSelectionBarEnd) {
934+
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
935+
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
936+
} else {
937+
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
938+
position = this.minH.rzsp + this.handleHalfDim;
939+
}
940+
this.setDimension(this.selBar, dimension);
941+
this.setPosition(this.selBar, position);
930942
if (this.options.getSelectionBarColor) {
931943
var color = this.getSelectionBarColor();
932944
this.scope.barStyle = {

‎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: 14 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@
4141
draggableRange: false,
4242
draggableRangeOnly: false,
4343
showSelectionBar: false,
44+
showSelectionBarEnd: false,
4445
hideLimitLabels: false,
4546
readOnly: false,
4647
disabled: false,
@@ -410,6 +411,8 @@
410411
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
411412
this.scope.showTicks = this.options.showTicks; //scope is used in the template
412413

414+
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd;
415+
413416
if (this.options.stepsArray) {
414417
this.options.floor = 0;
415418
this.options.ceil = this.options.stepsArray.length - 1;
@@ -929,8 +932,17 @@
929932
* @returns {undefined}
930933
*/
931934
updateSelectionBar: function() {
932-
this.setDimension(this.selBar, Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim);
933-
this.setPosition(this.selBar, this.range ? this.minH.rzsp + this.handleHalfDim : 0);
935+
var position = 0,
936+
dimension = 0;
937+
if (this.range || !this.options.showSelectionBarEnd) {
938+
dimension = Math.abs(this.maxH.rzsp - this.minH.rzsp) + this.handleHalfDim
939+
position = this.range ? this.minH.rzsp + this.handleHalfDim : 0;
940+
} else {
941+
dimension = Math.abs(this.maxPos - this.minH.rzsp) + this.handleHalfDim
942+
position = this.minH.rzsp + this.handleHalfDim;
943+
}
944+
this.setDimension(this.selBar, dimension);
945+
this.setPosition(this.selBar, position);
934946
if (this.options.getSelectionBarColor) {
935947
var color = this.getSelectionBarColor();
936948
this.scope.barStyle = {

‎tests/spec/rz-slider-service-test.js

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -402,6 +402,37 @@ describe('rzslider - ', function() {
402402
expect(slider.maxValue).to.equal(100);
403403
});
404404

405+
it('should set the correct dimension/position for selection bar for single slider with showSelectionBar=true', function() {
406+
var sliderConf = {
407+
value: 2,
408+
options: {
409+
floor: 0,
410+
ceil: 10,
411+
showSelectionBar: true
412+
}
413+
};
414+
createSlider(sliderConf);
415+
var expectedDimension = slider.valueToOffset(2) + slider.handleHalfDim;
416+
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
417+
expect(slider.selBar.css('left')).to.equal('0px');
418+
});
419+
420+
it('should set the correct dimension/position for selection bar for single slider with showSelectionBarEnd=true', function() {
421+
var sliderConf = {
422+
value: 2,
423+
options: {
424+
floor: 0,
425+
ceil: 10,
426+
showSelectionBarEnd: true
427+
}
428+
};
429+
createSlider(sliderConf);
430+
var expectedDimension = slider.valueToOffset(8) + slider.handleHalfDim,
431+
expectedPosition = slider.valueToOffset(2) + slider.handleHalfDim;
432+
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
433+
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
434+
});
435+
405436
it('should set the correct background-color on selection bar for single slider', function() {
406437
var sliderConf = {
407438
value: 10,
@@ -424,6 +455,22 @@ describe('rzslider - ', function() {
424455
expect(selBarChild.css('background-color')).to.equal('red');
425456
});
426457

458+
it('should set the correct dimension/position for selection bar for range slider', function() {
459+
var sliderConf = {
460+
min: 2,
461+
max: 8,
462+
options: {
463+
floor: 0,
464+
ceil: 10
465+
}
466+
};
467+
createRangeSlider(sliderConf);
468+
var expectedDimension = slider.valueToOffset(6) + slider.handleHalfDim,
469+
expectedPosition = slider.valueToOffset(2) + slider.handleHalfDim;
470+
expect(slider.selBar.css('width')).to.equal(expectedDimension + 'px');
471+
expect(slider.selBar.css('left')).to.equal(expectedPosition + 'px');
472+
});
473+
427474
it('should set the correct background-color on selection bar for range slider', function() {
428475
var sliderConf = {
429476
min: 2,

0 commit comments

Comments
 (0)