Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

WIP: Adding vertical sliders #6051

Closed
wants to merge 5 commits into from
Closed

WIP: Adding vertical sliders #6051

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
b6d66f2
WIP: Defining vertical orientation
Nov 8, 2015
f7710ee
Merge remote-tracking branch 'angular/master' into 1221
Dec 3, 2015
947cc67
feat(slider): support keys up/down arrow
Dec 3, 2015
664805f
fix(slider): avoid user left/right arrow in a vertical slider.
Dec 3, 2015
b24de8e
fix(slider): remove variable undefined.
Dec 3, 2015
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 20 additions & 6 deletions src/components/slider/slider.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@
* @usage
* <h4>Normal Mode</h4>
* <hljs lang="html">
* <md-slider ng-model="myValue" min="5" max="500">
* <md-slider ng-model="myValue" min="5" max="500" vertical>
* </md-slider>
* </hljs>
* <h4>Discrete Mode</h4>
Expand Down Expand Up @@ -113,6 +113,12 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
var tickContainer = angular.element(element[0].querySelector('.md-track-ticks'));
var throttledRefreshDimensions = $mdUtil.throttle(refreshSliderDimensions, 5000);

// Check have vertical orientation.
var isVertical = angular.isDefined(attr.vertical);
if (isVertical) {
element.addClass('md-slider-vertical');
}

// Default values, overridable by attrs
angular.isDefined(attr.min) ? attr.$observe('min', updateMin) : updateMin(0);
angular.isDefined(attr.max) ? attr.$observe('max', updateMax) : updateMax(100);
Expand Down Expand Up @@ -231,19 +237,27 @@ function SliderDirective($$rAF, $window, $mdAria, $mdUtil, $mdConstant, $mdThemi
}

/**
* left/right arrow listener
* left/right arrow listener for horizontal slider
* down/up arrow listener for vertical slider
*/
function keydownListener(ev) {
if(element[0].hasAttribute('disabled')) {
return;
}

var changeAmount;
if (ev.keyCode === $mdConstant.KEY_CODE.LEFT_ARROW) {
changeAmount = -step;
} else if (ev.keyCode === $mdConstant.KEY_CODE.RIGHT_ARROW) {
changeAmount = step;

switch (ev.keyCode) {
case $mdConstant.KEY_CODE.LEFT_ARROW & !isVertical:
case $mdConstant.KEY_CODE.DOWN_ARROW & isVertical:
changeAmount = -step;
break;
case $mdConstant.KEY_CODE.RIGHT_ARROW & !isVertical:
case $mdConstant.KEY_CODE.UP_ARROW & isVertical:
changeAmount = step;
break;
}

if (changeAmount) {
if (ev.metaKey || ev.ctrlKey || ev.altKey) {
changeAmount *= 4;
Expand Down
7 changes: 7 additions & 0 deletions src/components/slider/slider.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -62,6 +62,13 @@ md-slider {
position: relative;
}

/**
* Vertical Orientation
**/
.md-slider-vertical {
transform: rotate(90deg);
}

/**
* Track
*/
Expand Down