Skip to content

Commit ac81745

Browse files
ValentinHValentinH
committed
fix(vertical): Support switching between horizontal and vertical
Close #649
1 parent ddbbcca commit ac81745

5 files changed

Lines changed: 63 additions & 7 deletions

File tree

‎demo/demo.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -649,6 +649,7 @@ app.controller('MainCtrl', function($scope, $rootScope, $timeout, $uibModal) {
649649
disabled: false,
650650
showTicks: false,
651651
showTicksValues: false,
652+
vertical: false,
652653
},
653654
}
654655
$scope.toggleHighValue = function() {

‎demo/index.html‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -430,7 +430,8 @@ <h2>Slider with all options demo</h2>
430430
<label>Disabled <input type="checkbox" ng-model="slider_all_options.options.disabled"></label><br/>
431431
<label>Read-Only <input type="checkbox" ng-model="slider_all_options.options.readOnly"></label><br />
432432
<label>Right to Left <input type="checkbox" ng-model="slider_all_options.options.rightToLeft"></label><br />
433-
<label>Reversed Controls <input type="checkbox" ng-model="slider_all_options.options.reversedControls"></label>
433+
<label>Reversed Controls <input type="checkbox" ng-model="slider_all_options.options.reversedControls"></label><br />
434+
<label>Vertical <input type="checkbox" ng-model="slider_all_options.options.vertical"></label>
434435
</div>
435436
</div>
436437
<rzslider

‎dist/rzslider.js‎

Lines changed: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -604,6 +604,9 @@
604604
if (this.options.vertical) {
605605
this.positionProperty = 'bottom'
606606
this.dimensionProperty = 'height'
607+
} else {
608+
this.positionProperty = 'left'
609+
this.dimensionProperty = 'width'
607610
}
608611

609612
if (this.options.customTemplateScope)
@@ -638,6 +641,7 @@
638641
* @returns {undefined}
639642
*/
640643
resetSlider: function() {
644+
this.resetLabelsValue()
641645
this.manageElementsStyle()
642646
this.addAccessibility()
643647
this.setMinAndMax()
@@ -779,7 +783,11 @@
779783
this.fullBar.addClass('rz-transparent')
780784
}
781785

782-
if (this.options.vertical) this.sliderElem.addClass('rz-vertical')
786+
if (this.options.vertical) {
787+
this.sliderElem.addClass('rz-vertical')
788+
} else {
789+
this.sliderElem.removeClass('rz-vertical')
790+
}
783791

784792
if (this.options.draggableRange) this.selBar.addClass('rz-draggable')
785793
else this.selBar.removeClass('rz-draggable')
@@ -826,6 +834,14 @@
826834
resetLabelsValue: function() {
827835
this.minLab.rzsv = undefined
828836
this.maxLab.rzsv = undefined
837+
this.flrLab.rzsv = undefined
838+
this.ceilLab.rzsv = undefined
839+
this.cmbLab.rzsv = undefined
840+
this.resetPosition(this.flrLab)
841+
this.resetPosition(this.ceilLab)
842+
this.resetPosition(this.cmbLab)
843+
this.resetPosition(this.minLab)
844+
this.resetPosition(this.maxLab)
829845
},
830846

831847
/**
@@ -945,8 +961,11 @@
945961
)
946962
this.minH.attr('tabindex', '0')
947963
else this.minH.attr('tabindex', '')
948-
if (this.options.vertical)
964+
if (this.options.vertical) {
949965
this.minH.attr('aria-orientation', 'vertical')
966+
} else {
967+
this.minH.attr('aria-orientation', 'horizontal')
968+
}
950969
if (this.options.ariaLabel)
951970
this.minH.attr('aria-label', this.options.ariaLabel)
952971
else if (this.options.ariaLabelledBy)
@@ -962,6 +981,7 @@
962981
else this.maxH.attr('tabindex', '')
963982
if (this.options.vertical)
964983
this.maxH.attr('aria-orientation', 'vertical')
984+
else this.maxH.attr('aria-orientation', 'horizontal')
965985
if (this.options.ariaLabelHigh)
966986
this.maxH.attr('aria-label', this.options.ariaLabelHigh)
967987
else if (this.options.ariaLabelledByHigh)
@@ -1632,6 +1652,13 @@
16321652
return pos
16331653
},
16341654

1655+
resetPosition: function(elem) {
1656+
elem.css({
1657+
left: null,
1658+
bottom: null,
1659+
})
1660+
},
1661+
16351662
/**
16361663
* Get element width/height depending on whether slider is horizontal or vertical
16371664
*

‎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: 29 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -608,6 +608,9 @@
608608
if (this.options.vertical) {
609609
this.positionProperty = 'bottom'
610610
this.dimensionProperty = 'height'
611+
} else {
612+
this.positionProperty = 'left'
613+
this.dimensionProperty = 'width'
611614
}
612615

613616
if (this.options.customTemplateScope)
@@ -642,6 +645,7 @@
642645
* @returns {undefined}
643646
*/
644647
resetSlider: function() {
648+
this.resetLabelsValue()
645649
this.manageElementsStyle()
646650
this.addAccessibility()
647651
this.setMinAndMax()
@@ -783,7 +787,11 @@
783787
this.fullBar.addClass('rz-transparent')
784788
}
785789

786-
if (this.options.vertical) this.sliderElem.addClass('rz-vertical')
790+
if (this.options.vertical) {
791+
this.sliderElem.addClass('rz-vertical')
792+
} else {
793+
this.sliderElem.removeClass('rz-vertical')
794+
}
787795

788796
if (this.options.draggableRange) this.selBar.addClass('rz-draggable')
789797
else this.selBar.removeClass('rz-draggable')
@@ -830,6 +838,14 @@
830838
resetLabelsValue: function() {
831839
this.minLab.rzsv = undefined
832840
this.maxLab.rzsv = undefined
841+
this.flrLab.rzsv = undefined
842+
this.ceilLab.rzsv = undefined
843+
this.cmbLab.rzsv = undefined
844+
this.resetPosition(this.flrLab)
845+
this.resetPosition(this.ceilLab)
846+
this.resetPosition(this.cmbLab)
847+
this.resetPosition(this.minLab)
848+
this.resetPosition(this.maxLab)
833849
},
834850

835851
/**
@@ -949,8 +965,11 @@
949965
)
950966
this.minH.attr('tabindex', '0')
951967
else this.minH.attr('tabindex', '')
952-
if (this.options.vertical)
968+
if (this.options.vertical) {
953969
this.minH.attr('aria-orientation', 'vertical')
970+
} else {
971+
this.minH.attr('aria-orientation', 'horizontal')
972+
}
954973
if (this.options.ariaLabel)
955974
this.minH.attr('aria-label', this.options.ariaLabel)
956975
else if (this.options.ariaLabelledBy)
@@ -966,6 +985,7 @@
966985
else this.maxH.attr('tabindex', '')
967986
if (this.options.vertical)
968987
this.maxH.attr('aria-orientation', 'vertical')
988+
else this.maxH.attr('aria-orientation', 'horizontal')
969989
if (this.options.ariaLabelHigh)
970990
this.maxH.attr('aria-label', this.options.ariaLabelHigh)
971991
else if (this.options.ariaLabelledByHigh)
@@ -1636,6 +1656,13 @@
16361656
return pos
16371657
},
16381658

1659+
resetPosition: function(elem) {
1660+
elem.css({
1661+
left: null,
1662+
bottom: null,
1663+
})
1664+
},
1665+
16391666
/**
16401667
* Get element width/height depending on whether slider is horizontal or vertical
16411668
*

0 commit comments

Comments
 (0)