Skip to content

Commit 4cfc305

Browse files
ValentinHValentinH
committed
Handle showTicksValues using different positions
1 parent 0ad91f8 commit 4cfc305

File tree

6 files changed

+70
-12
lines changed

6 files changed

+70
-12
lines changed

‎dist/rzslider.css

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -159,6 +159,11 @@ rzslider .rz-ticks .rz-tick .rz-tick-value {
159159
transform: translate(-50%, 0);
160160
}
161161

162+
rzslider .rz-ticks.rz-ticks-values-under .rz-tick-value {
163+
top: initial;
164+
bottom: -40px;
165+
}
166+
162167
rzslider.rz-vertical {
163168
position: relative;
164169
width: 4px;
@@ -224,7 +229,13 @@ rzslider.rz-vertical .rz-ticks .rz-tick {
224229
}
225230

226231
rzslider.rz-vertical .rz-ticks .rz-tick .rz-tick-value {
227-
top: auto;
232+
top: initial;
228233
left: 22px;
229234
transform: translate(0, -28%);
235+
}
236+
237+
rzslider.rz-vertical .rz-ticks.rz-ticks-values-under .rz-tick-value {
238+
right: 12px;
239+
bottom: initial;
240+
left: initial;
230241
}

‎dist/rzslider.js

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -247,6 +247,14 @@
247247
*/
248248
this.valueRange = 0;
249249

250+
251+
/**
252+
* If showTicks/showTicksValues options are number.
253+
* In this case, ticks values should be displayed below the slider.
254+
* @type {boolean}
255+
*/
256+
this.intermediateTicks = false;
257+
250258
/**
251259
* Set to true if init method already executed
252260
*
@@ -416,6 +424,8 @@
416424

417425
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
418426
this.scope.showTicks = this.options.showTicks; //scope is used in the template
427+
if(angular.isNumber(this.options.showTicks))
428+
this.intermediateTicks = true;
419429

420430
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
421431
|| this.options.showSelectionBarFromValue !== null;
@@ -530,11 +540,14 @@
530540
else
531541
this.maxH.css('display', '');
532542

543+
533544
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
534545
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
535-
this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
536-
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
537-
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
546+
547+
var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
548+
this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
549+
this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
550+
this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
538551
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
539552

540553
if (this.options.vertical)
@@ -544,6 +557,9 @@
544557
this.selBar.addClass('rz-draggable');
545558
else
546559
this.selBar.removeClass('rz-draggable');
560+
561+
if(this.intermediateTicks && this.options.showTicksValues)
562+
this.ticks.addClass('rz-ticks-values-under');
547563
},
548564

549565
alwaysHide: function(el, hide) {
@@ -752,7 +768,7 @@
752768
updateTicksScale: function() {
753769
if (!this.options.showTicks) return;
754770
var step = this.step;
755-
if(angular.isNumber(this.options.showTicks))
771+
if(this.intermediateTicks)
756772
step = this.options.showTicks;
757773
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
758774
this.scope.ticks = [];

‎dist/rzslider.min.css

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎dist/rzslider.min.js

Lines changed: 1 addition & 1 deletion
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/rzslider.js

Lines changed: 20 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -251,6 +251,14 @@
251251
*/
252252
this.valueRange = 0;
253253

254+
255+
/**
256+
* If showTicks/showTicksValues options are number.
257+
* In this case, ticks values should be displayed below the slider.
258+
* @type {boolean}
259+
*/
260+
this.intermediateTicks = false;
261+
254262
/**
255263
* Set to true if init method already executed
256264
*
@@ -420,6 +428,8 @@
420428

421429
this.options.showTicks = this.options.showTicks || this.options.showTicksValues;
422430
this.scope.showTicks = this.options.showTicks; //scope is used in the template
431+
if(angular.isNumber(this.options.showTicks))
432+
this.intermediateTicks = true;
423433

424434
this.options.showSelectionBar = this.options.showSelectionBar || this.options.showSelectionBarEnd
425435
|| this.options.showSelectionBarFromValue !== null;
@@ -534,11 +544,14 @@
534544
else
535545
this.maxH.css('display', '');
536546

547+
537548
this.alwaysHide(this.flrLab, this.options.showTicksValues || this.options.hideLimitLabels);
538549
this.alwaysHide(this.ceilLab, this.options.showTicksValues || this.options.hideLimitLabels);
539-
this.alwaysHide(this.minLab, this.options.showTicksValues || this.options.hidePointerLabels);
540-
this.alwaysHide(this.maxLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
541-
this.alwaysHide(this.cmbLab, this.options.showTicksValues || !this.range || this.options.hidePointerLabels);
550+
551+
var hideLabelsForTicks = this.options.showTicksValues && !this.intermediateTicks;
552+
this.alwaysHide(this.minLab, hideLabelsForTicks || this.options.hidePointerLabels);
553+
this.alwaysHide(this.maxLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
554+
this.alwaysHide(this.cmbLab, hideLabelsForTicks || !this.range || this.options.hidePointerLabels);
542555
this.alwaysHide(this.selBar, !this.range && !this.options.showSelectionBar);
543556

544557
if (this.options.vertical)
@@ -548,6 +561,9 @@
548561
this.selBar.addClass('rz-draggable');
549562
else
550563
this.selBar.removeClass('rz-draggable');
564+
565+
if(this.intermediateTicks && this.options.showTicksValues)
566+
this.ticks.addClass('rz-ticks-values-under');
551567
},
552568

553569
alwaysHide: function(el, hide) {
@@ -756,7 +772,7 @@
756772
updateTicksScale: function() {
757773
if (!this.options.showTicks) return;
758774
var step = this.step;
759-
if(angular.isNumber(this.options.showTicks))
775+
if(this.intermediateTicks)
760776
step = this.options.showTicks;
761777
var ticksCount = Math.round((this.maxValue - this.minValue) / step) + 1;
762778
this.scope.ticks = [];

‎src/rzslider.less

Lines changed: 16 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -149,6 +149,13 @@ rzslider {
149149
transform: translate(-50%, 0);
150150
}
151151
}
152+
153+
&.rz-ticks-values-under {
154+
.rz-tick-value {
155+
top: initial;
156+
bottom: @ticksValuePosition - 10;
157+
}
158+
}
152159
}
153160

154161
&.rz-vertical {
@@ -212,10 +219,18 @@ rzslider {
212219
vertical-align: middle;
213220
.rz-tick-value {
214221
left: @ticksValuePositionOnVertical;
215-
top: auto;
222+
top: initial;
216223
transform: translate(0, -28%);
217224
}
218225
}
226+
227+
&.rz-ticks-values-under {
228+
.rz-tick-value {
229+
bottom: initial;
230+
left: initial;
231+
right: @ticksValuePositionOnVertical - 10;
232+
}
233+
}
219234
}
220235
}
221236
}

0 commit comments

Comments
 (0)