Skip to content

feat(md-slider): initial version for md-slider #779

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 32 commits into from
Jul 14, 2016
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
32 commits
Select commit Hold shift + click to select a range
4ea37bc
Made a static slider
iveysaur Jun 2, 2016
bd7801e
Move slider by clicking
iveysaur Jun 3, 2016
05ba393
Add dragging to slider
iveysaur Jun 4, 2016
b02587c
Remove transition when dragging
iveysaur Jun 4, 2016
fabe49d
Resize support and color in track
iveysaur Jun 6, 2016
4b23ae6
Prevent selection of other elements while dragging
iveysaur Jun 6, 2016
91be0f3
Resize thumb based on focus status
iveysaur Jun 6, 2016
b0a661e
Use query selector over get element...
iveysaur Jun 6, 2016
7776f5a
Change blur listener function name
iveysaur Jun 8, 2016
fc6eb42
Stylelint fixes
iveysaur Jun 8, 2016
bed6643
Make slider inline-block
iveysaur Jun 10, 2016
5c34daf
Move the thumb with translateX instead of left
iveysaur Jun 17, 2016
99c0352
Add min and max to slider as input
iveysaur Jun 17, 2016
a9866c5
Add disabled to slider
iveysaur Jun 20, 2016
6ca7438
Add value to slider input
iveysaur Jun 21, 2016
4590264
Add comments
iveysaur Jun 21, 2016
cdd8a2a
Test starting point
iveysaur Jun 22, 2016
af591ef
Some slider tests
iveysaur Jun 25, 2016
6696369
Finish tests for slider
iveysaur Jun 28, 2016
982f4a4
Add test gesture config
iveysaur Jun 28, 2016
8f79946
Clean up
iveysaur Jun 28, 2016
ef2cb05
Create a MouseEvent so that IE11 will pass
iveysaur Jun 29, 2016
4d55f1b
Move shared vertical centering logic into a function
iveysaur Jun 30, 2016
af93674
Clarify transitions
iveysaur Jun 30, 2016
bd6a93f
Remove unneeded flex-direction
iveysaur Jun 30, 2016
a470bbd
Add webkitTransform for mobile safari 8
iveysaur Jul 1, 2016
a23ba80
Add tests for thumb and track position on drag
iveysaur Jul 1, 2016
f544214
Update tests to use other numbers and fix small things
iveysaur Jul 8, 2016
51b0bde
Move slider native element into own variable
iveysaur Jul 8, 2016
3856ee1
Cursor is normal when dragging
iveysaur Jul 8, 2016
afe95a2
Update sass variables and export slider directives + nits
iveysaur Jul 14, 2016
0416839
Update unit test to not use it, describe, etc.
iveysaur Jul 14, 2016
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
15 changes: 15 additions & 0 deletions src/components/slider/slider.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
<div class="md-slider-wrapper">
<div class="md-slider-container"
[class.md-slider-dragging]="isDragging"
[class.md-slider-active]="isActive">
<div class="md-slider-track-container">
<div class="md-slider-track"></div>
<div class="md-slider-track md-slider-track-fill"></div>
</div>
<div class="md-slider-thumb-container">
<div class="md-slider-thumb-position">
<div class="md-slider-thumb"></div>
</div>
</div>
</div>
</div>
143 changes: 143 additions & 0 deletions src/components/slider/slider.scss
Original file line number Diff line number Diff line change
@@ -0,0 +1,143 @@
@import 'default-theme';
@import '_variables';

// This refers to the thickness of the slider. On a horizontal slider this is the height, on a
// vertical slider this is the width.
$md-slider-thickness: 20px !default;
$md-slider-min-size: 128px !default;
$md-slider-padding: 8px !default;

$md-slider-track-height: 2px !default;
$md-slider-thumb-size: 20px !default;

$md-slider-thumb-default-scale: 0.7 !default;
$md-slider-thumb-focus-scale: 1 !default;

// TODO(iveysaur): Find an implementation to hide the track under a disabled thumb.
$md-slider-off-color: rgba(black, 0.26);
$md-slider-focused-color: rgba(black, 0.38);
$md-slider-disabled-color: rgba(black, 0.26);

/**
* Uses a container height and an item height to center an item vertically within the container.
*/
@function center-vertically($containerHeight, $itemHeight) {
@return ($containerHeight / 2) - ($itemHeight / 2);
}

/**
* Positions the thumb based on its width and height.
*/
@mixin slider-thumb-position($width: $md-slider-thumb-size, $height: $md-slider-thumb-size) {
position: absolute;
top: center-vertically($md-slider-thickness, $height);
width: $width;
height: $height;
border-radius: max($width, $height);
}

md-slider {
height: $md-slider-thickness;
min-width: $md-slider-min-size;
position: relative;
padding: 0;
display: inline-block;
outline: none;
vertical-align: middle;
}

md-slider *,
md-slider *::after {
box-sizing: border-box;
}

/**
* Exists in order to pad the slider and keep everything positioned correctly.
* Cannot be merged with the .md-slider-container.
*/
.md-slider-wrapper {
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Add comments for slider-wrapper and slider-container since it's not immediately obvious what they're used for.

width: 100%;
height: 100%;
padding-left: $md-slider-padding;
padding-right: $md-slider-padding;
}

/**
* Holds the isActive and isDragging classes as well as helps with positioning the children.
* Cannot be merged with .md-slider-wrapper.
*/
.md-slider-container {
position: relative;
}

.md-slider-track-container {
width: 100%;
position: absolute;
top: center-vertically($md-slider-thickness, $md-slider-track-height);
height: $md-slider-track-height;
}

.md-slider-track {
position: absolute;
left: 0;
right: 0;
height: 100%;
background-color: $md-slider-off-color;
}

.md-slider-track-fill {
transition-duration: $swift-ease-out-duration;
transition-timing-function: $swift-ease-out-timing-function;
transition-property: width, height;
background-color: md-color($md-accent);
}

.md-slider-thumb-container {
position: absolute;
left: 0;
top: 50%;
transform: translate3d(-50%, -50%, 0);
transition-duration: $swift-ease-out-duration;
transition-timing-function: $swift-ease-out-timing-function;
transition-property: left, bottom;
}

.md-slider-thumb-position {
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-thumb {
z-index: 1;

@include slider-thumb-position($md-slider-thumb-size, $md-slider-thumb-size);
transform: scale($md-slider-thumb-default-scale);
transition: transform $swift-ease-out-duration $swift-ease-out-timing-function;
}

.md-slider-thumb::after {
content: '';
position: absolute;
width: $md-slider-thumb-size;
height: $md-slider-thumb-size;
border-radius: max($md-slider-thumb-size, $md-slider-thumb-size);
border-width: 3px;
border-style: solid;
transition: inherit;
background-color: md-color($md-accent);
border-color: md-color($md-accent);
}

.md-slider-dragging .md-slider-thumb-position,
.md-slider-dragging .md-slider-track-fill {
transition: none;
cursor: default;
}

.md-slider-active .md-slider-thumb {
transform: scale($md-slider-thumb-focus-scale);
}

.md-slider-disabled .md-slider-thumb::after {
background-color: $md-slider-disabled-color;
border-color: $md-slider-disabled-color;
}
Loading