Skip to content
This repository has been archived by the owner on Aug 29, 2023. It is now read-only.

Commit

Permalink
feat(slider): vertical slider, UI fixes and bug fixes
Browse files Browse the repository at this point in the history 
- Added vertical slider
- Improved UI
- Fixed dynamic min/max with values not in range
- Made value rounding to 6 zeros after the dot
- Added discrete readonly mode
- Added disabled on slider container

fixes #4371, #3259, #2421, #1221, #4576, #6996
closes #5874, #5872, #6051
  • Loading branch information
@EladBezalel
EladBezalel committed Feb 26, 2016
1 parent 78ccef6 commit f1b7529
Show file tree
Hide file tree
Showing 9 changed files with 918 additions and 199 deletions.
56 changes: 29 additions & 27 deletions src/components/slider/demoBasicUsage/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,38 +6,32 @@ <h3>
RGB <span ng-attr-style="border: 1px solid #333; background: rgb({{color.red}},{{color.green}},{{color.blue}})">&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
</h3>

<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">R</span>
</div>
<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider" class="">
<md-slider-container>
<span>R</span>
<md-slider flex min="0" max="255" ng-model="color.red" aria-label="red" id="red-slider">
</md-slider>
<div flex="20" layout layout-align="center center">
<md-input-container>
<input flex type="number" ng-model="color.red" aria-label="red" aria-controls="red-slider">
</div>
</div>
</md-input-container>
</md-slider-container>

<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">G</span>
</div>
<md-slider-container>
<span>G</span>
<md-slider flex ng-model="color.green" min="0" max="255" aria-label="green" id="green-slider" class="md-accent">
</md-slider>
<div flex="20" layout layout-align="center center">
<md-input-container>
<input flex type="number" ng-model="color.green" aria-label="green" aria-controls="green-slider">
</div>
</div>
</md-input-container>
</md-slider-container>

<div layout>
<div flex="10" layout layout-align="center center">
<span class="md-body-1">B</span>
</div>
<md-slider-container>
<span class="md-body-1">B</span>
<md-slider flex ng-model="color.blue" min="0" max="255" aria-label="blue" id="blue-slider" class="md-primary">
</md-slider>
<div flex="20" layout layout-align="center center">
<md-input-container>
<input flex type="number" ng-model="color.blue" aria-label="blue" aria-controls="blue-slider">
</div>
</div>
</md-input-container>
</md-slider-container>

<h3>Rating: {{rating}}/5 - demo of theming classes</h3>
<div layout>
Expand All @@ -63,12 +57,20 @@ <h3>Rating: {{rating}}/5 - demo of theming classes</h3>
</div>

<h3>Disabled</h3>
<md-slider ng-model="disabled1" ng-disabled="true" aria-label="Disabled 1"></md-slider>
<md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>
<md-slider-container ng-disabled="isDisabled">
<md-icon md-svg-icon="device:brightness-low"></md-icon>
<md-slider ng-model="disabled1" aria-label="Disabled 1" flex md-discrete ng-readonly="readonly"></md-slider>

<h3>Disabled, Discrete</h3>
<md-slider ng-model="disabled1" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 1"></md-slider>
<md-slider ng-model="disabled2" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 2"></md-slider>
<md-input-container>
<input flex type="number" ng-model="disabled1" aria-label="green" aria-controls="green-slider">
</md-input-container>
</md-slider-container>
<md-checkbox ng-model="isDisabled">Is disabled</md-checkbox>
<md-slider ng-model="disabled2" ng-disabled="true" aria-label="Disabled 2"></md-slider>

<h3>Disabled, Discrete, Read Only</h3>
<md-slider ng-model="disabled2" ng-disabled="true" step="3" md-discrete min="0" max="10" aria-label="Disabled discrete 2"></md-slider>
<md-slider ng-model="disabled3" ng-disabled="true" step="10" md-discrete aria-label="Disabled discrete 3" ng-readonly="readonly"></md-slider>
<md-checkbox ng-model="readonly">Read only</md-checkbox>
</md-content>
</div>
11 changes: 8 additions & 3 deletions src/components/slider/demoBasicUsage/script.js
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@

angular.module('sliderDemo1', ['ngMaterial'])

.config(function($mdIconProvider) {
$mdIconProvider
.iconSet('device', 'img/icons/sets/device-icons.svg', 24);
})
.controller('AppCtrl', function($scope) {

$scope.color = {
Expand All @@ -13,7 +16,9 @@ angular.module('sliderDemo1', ['ngMaterial'])
$scope.rating2 = 2;
$scope.rating3 = 4;

$scope.disabled1 = 0;
$scope.disabled2 = 70;
$scope.disabled1 = Math.floor(Math.random() * 100);
$scope.disabled2 = 0;
$scope.disabled3 = 70;

$scope.isDisabled = true;
});
5 changes: 0 additions & 5 deletions src/components/slider/demoBasicUsage/style.css
View file

This file was deleted.

33 changes: 33 additions & 0 deletions src/components/slider/demoVertical/index.html
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
<div ng-controller="AppCtrl" ng-cloak>
<md-content layout="row" layout-padding>
<md-slider-container flex>
<md-input-container>
<input flex type="number" ng-model="vol" aria-label="volume" aria-controls="volume-slider">
</md-input-container>
<md-slider ng-model="vol" min="0" max="100" aria-label="volume" id="volume-slider" class="md-accent" md-vertical
md-range></md-slider>
</md-slider>
<h5>Volume</h5>
</md-slider-container>
<md-slider-container flex>
<md-input-container>
<input flex type="number" ng-model="bass" aria-label="bass" aria-controls="bass-slider">
</md-input-container>
<md-slider md-discrete ng-model="bass" min="0" max="100" step="10" aria-label="bass" class="md-primary"
md-vertical></md-slider>
</md-slider>
<h5>Bass</h5>
</md-slider-container>
<div flex layout="column" layout-align="center center">
<md-slider-container ng-disabled="readonly">
<md-input-container>
<input flex type="number" ng-model="master" aria-label="master" aria-controls="master-slider">
</md-input-container>
<md-slider flex ng-model="master" md-discrete aria-label="Master" md-vertical step="10"
ng-readonly="readonly"></md-slider>
<h5>Master</h5>
</md-slider-container>
<md-checkbox ng-model="readonly">Read only</md-checkbox>
</div>
</md-content>
</div>
9 changes: 9 additions & 0 deletions src/components/slider/demoVertical/script.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@

angular.module('sliderDemo2', ['ngMaterial'])

.controller('AppCtrl', function($scope) {

$scope.vol = Math.floor(Math.random() * 100);
$scope.bass = Math.floor(Math.random() * 100);
$scope.master = Math.floor(Math.random() * 100);
});
112 changes: 100 additions & 12 deletions src/components/slider/slider-theme.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,21 +4,50 @@ md-slider.md-THEME_NAME-theme {
background-color: '{{foreground-3}}';
}
._md-track-ticks {
background-color: '{{foreground-4}}';
}
._md-focus-thumb {
background-color: '{{foreground-2}}';
color: '{{background-contrast}}';
}
._md-focus-ring {
background-color: '{{accent-color}}';
background-color: '{{accent-200-0.38}}';
}
._md-disabled-thumb {
border-color: '{{background-color}}';
}
&._md-min ._md-thumb:after {
background-color: '{{background-color}}';
}

&._md-min {
._md-thumb:after {
background-color: '{{background-color}}';
border-color: '{{foreground-3}}';
}

._md-focus-ring {
background-color: '{{foreground-3-0.38}}';
}

&[md-discrete] {
._md-thumb {
&:after {
background-color: '{{background-contrast}}';
border-color: transparent;
}
}

._md-sign {
background-color: '{{background-400}}';
&:after {
border-top-color: '{{background-400}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{background-400}}';
}
}
}
}

._md-track._md-track-fill {
background-color: '{{accent-color}}';
}
Expand All @@ -32,13 +61,21 @@ md-slider.md-THEME_NAME-theme {
border-top-color: '{{accent-color}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{accent-color}}';
}
}

._md-thumb-text {
color: '{{accent-contrast}}';
}

&.md-warn {
._md-focus-ring {
background-color: '{{warn-color}}';
background-color: '{{warn-200-0.38}}';
}
._md-track._md-track-fill {
background-color: '{{warn-color}}';
Expand All @@ -54,14 +91,22 @@ md-slider.md-THEME_NAME-theme {
border-top-color: '{{warn-color}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{warn-color}}';
}
}

._md-thumb-text {
color: '{{warn-contrast}}';
}
}

&.md-primary {
._md-focus-ring {
background-color: '{{primary-color}}';
background-color: '{{primary-200-0.38}}';
}
._md-track._md-track-fill {
background-color: '{{primary-color}}';
Expand All @@ -77,17 +122,60 @@ md-slider.md-THEME_NAME-theme {
border-top-color: '{{primary-color}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{primary-color}}';
}
}

._md-thumb-text {
color: '{{primary-contrast}}';
}
}

&[disabled] {
._md-thumb:after {
border-color: '{{foreground-3}}';
border-color: transparent;
}
&:not(._md-min) ._md-thumb:after {
background-color: '{{foreground-3}}';
&:not(._md-min), &[md-discrete] {
._md-thumb:after {
background-color: '{{foreground-3}}';
border-color: transparent;
}
}
}

&[disabled][readonly] {
._md-sign {
background-color: '{{background-400}}';
&:after {
border-top-color: '{{background-400}}';
}
}

&[md-vertical] {
._md-sign:after {
border-top-color: transparent;
border-left-color: '{{background-400}}';
}
}

._md-disabled-thumb {
border-color: transparent;
background-color: transparent;
}
}
}

md-slider-container {
&[disabled] {
& > *:first-child,
& > *:last-child {
&:not(md-slider){
color: '{{foreground-3}}';
}
}
}
}

0 comments on commit f1b7529

Please sign in to comment.