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

Skip to content

Commit 837ca8b

Browse files
author
Valentin Hervieu
committed
Support ticks for range and always visible bars
1 parent d500b8e commit 837ca8b

File tree

9 files changed

+98
-38
lines changed

9 files changed

+98
-38
lines changed

‎bower.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "angularjs-slider",
3-
"version": "0.1.33",
3+
"version": "0.1.34",
44
"homepage": "https://github.com/rzajac/angularjs-slider",
55
"authors": [
66
"Rafal Zajac <[email protected]>",

‎demo/index.html

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -103,6 +103,26 @@ <h2>Slider with ticks value example</h2>
103103
rz-slider-show-ticks-value="true"></rzslider>
104104
</article>
105105

106+
<article>
107+
<h2>Slider with ticks value and visible bar example</h2>
108+
Value: {{ priceSlider6 | json }}
109+
<rzslider rz-slider-model="priceSlider6"
110+
rz-slider-floor="0"
111+
rz-slider-ceil="10"
112+
rz-slider-always-show-bar="true"
113+
rz-slider-show-ticks-value="true"></rzslider>
114+
</article>
115+
116+
<article>
117+
<h2>Range Slider with ticks value example</h2>
118+
Value: {{ priceSlider6 | json }}
119+
<rzslider rz-slider-model="priceSlider7.min"
120+
rz-slider-high="priceSlider7.max"
121+
rz-slider-floor="0"
122+
rz-slider-ceil="10"
123+
rz-slider-show-ticks-value="true"></rzslider>
124+
</article>
125+
106126
<article>
107127
<h2>Draggable range example</h2>
108128
Value:
@@ -151,6 +171,11 @@ <h2>Toggle slider example</h2>
151171
$scope.priceSlider3 = 250;
152172
$scope.priceSlider4 = 5;
153173
$scope.priceSlider5 = 5;
174+
$scope.priceSlider6 = 5;
175+
$scope.priceSlider7 = {
176+
min: 2,
177+
max: 8
178+
};
154179

155180
$scope.translate = function(value) {
156181
return '$' + value;

‎dist/rzslider.css

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -128,10 +128,14 @@ rzslider .rz-ticks .tick {
128128
height: 10px;
129129
text-align: center;
130130
cursor: pointer;
131-
background: #666666;
131+
background: #d8e0f3;
132132
border-radius: 50%;
133133
}
134134

135+
rzslider .rz-ticks .tick.selected {
136+
background: #0db9f0;
137+
}
138+
135139
rzslider .rz-ticks .tick .tick-value {
136140
position: absolute;
137141
top: -30px;

‎dist/rzslider.js

Lines changed: 28 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
* (c) Rafal Zajac <[email protected]>
55
* http://github.com/rzajac/angularjs-slider
66
*
7-
* Version: v0.1.33
7+
* Version: v0.1.34
88
*
99
* Licensed under the MIT license
1010
*/
@@ -296,8 +296,6 @@ function throttle(func, wait, options) {
296296
self.updateFloorLab();
297297
self.initHandles();
298298
if (!self.presentOnly) { self.bindEvents(); }
299-
if(self.showTicks)
300-
self.updateTicksScale();
301299
});
302300

303301
// Recalculate slider view dimensions
@@ -316,6 +314,7 @@ function throttle(func, wait, options) {
316314
self.setMinAndMax();
317315
self.updateLowHandle(self.valueToOffset(self.scope.rzSliderModel));
318316
self.updateSelectionBar();
317+
self.updateTicksScale();
319318

320319
if(self.range)
321320
{
@@ -329,6 +328,7 @@ function throttle(func, wait, options) {
329328
self.setMinAndMax();
330329
self.updateHighHandle(self.valueToOffset(self.scope.rzSliderHigh));
331330
self.updateSelectionBar();
331+
self.updateTicksScale();
332332
self.updateCmbLabel();
333333
}, 350, { leading: false });
334334

@@ -438,6 +438,7 @@ function throttle(func, wait, options) {
438438
}
439439

440440
this.updateSelectionBar();
441+
this.updateTicksScale();
441442
},
442443

443444
/**
@@ -605,8 +606,6 @@ function throttle(func, wait, options) {
605606

606607
this.getWidth(this.sliderElem);
607608
this.sliderElem.rzsl = this.sliderElem[0].getBoundingClientRect().left;
608-
if(this.showTicks)
609-
this.updateTicksScale();
610609

611610
if(this.initHasRun)
612611
{
@@ -621,16 +620,27 @@ function throttle(func, wait, options) {
621620
* @returns {undefined}
622621
*/
623622
updateTicksScale: function() {
624-
if(!this.step) return; //if step is 0, the following loop will be endless.
625-
626-
var positions = '';
627-
for (var i = this.minValue; i <= this.maxValue; i += this.step) {
628-
positions += '<li class="tick">';
629-
if(this.showTicksValue)
630-
positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
631-
positions += '</li>';
632-
}
633-
this.ticks.html(positions);
623+
if(!this.showTicks) return;
624+
if(!this.step) return; //if step is 0, the following loop will be endless.
625+
626+
var positions = '';
627+
for (var i = this.minValue; i <= this.maxValue; i += this.step) {
628+
var selectedClass = this.isTickSelected(i) ? 'selected': false;
629+
positions += '<li class="tick '+ selectedClass +'">';
630+
if(this.showTicksValue)
631+
positions += '<span class="tick-value">'+ this.getDisplayValue(i) +'</span>';
632+
positions += '</li>';
633+
}
634+
this.ticks.html(positions);
635+
},
636+
637+
isTickSelected: function(value) {
638+
var tickLeft = this.valueToOffset(value);
639+
if(!this.range && this.alwaysShowBar && value <= this.scope.rzSliderModel)
640+
return true;
641+
if(this.range && value >= this.scope.rzSliderModel && value <= this.scope.rzSliderHigh)
642+
return true;
643+
return false;
634644
},
635645

636646
/**
@@ -710,6 +720,7 @@ function throttle(func, wait, options) {
710720
{
711721
this.updateLowHandle(newOffset);
712722
this.updateSelectionBar();
723+
this.updateTicksScale();
713724

714725
if(this.range)
715726
{
@@ -722,6 +733,7 @@ function throttle(func, wait, options) {
722733
{
723734
this.updateHighHandle(newOffset);
724735
this.updateSelectionBar();
736+
this.updateTicksScale();
725737

726738
if(this.range)
727739
{
@@ -734,6 +746,7 @@ function throttle(func, wait, options) {
734746
this.updateLowHandle(newOffset);
735747
this.updateHighHandle(newOffset);
736748
this.updateSelectionBar();
749+
this.updateTicksScale();
737750
this.updateCmbLabel();
738751
},
739752

‎dist/rzslider.min.css

Lines changed: 2 additions & 2 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)