-
Notifications
You must be signed in to change notification settings - Fork 6.8k
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
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 bd7801e
Move slider by clicking
iveysaur 05ba393
Add dragging to slider
iveysaur b02587c
Remove transition when dragging
iveysaur fabe49d
Resize support and color in track
iveysaur 4b23ae6
Prevent selection of other elements while dragging
iveysaur 91be0f3
Resize thumb based on focus status
iveysaur b0a661e
Use query selector over get element...
iveysaur 7776f5a
Change blur listener function name
iveysaur fc6eb42
Stylelint fixes
iveysaur bed6643
Make slider inline-block
iveysaur 5c34daf
Move the thumb with translateX instead of left
iveysaur 99c0352
Add min and max to slider as input
iveysaur a9866c5
Add disabled to slider
iveysaur 6ca7438
Add value to slider input
iveysaur 4590264
Add comments
iveysaur cdd8a2a
Test starting point
iveysaur af591ef
Some slider tests
iveysaur 6696369
Finish tests for slider
iveysaur 982f4a4
Add test gesture config
iveysaur 8f79946
Clean up
iveysaur ef2cb05
Create a MouseEvent so that IE11 will pass
iveysaur 4d55f1b
Move shared vertical centering logic into a function
iveysaur af93674
Clarify transitions
iveysaur bd6a93f
Remove unneeded flex-direction
iveysaur a470bbd
Add webkitTransform for mobile safari 8
iveysaur a23ba80
Add tests for thumb and track position on drag
iveysaur f544214
Update tests to use other numbers and fix small things
iveysaur 51b0bde
Move slider native element into own variable
iveysaur 3856ee1
Cursor is normal when dragging
iveysaur afe95a2
Update sass variables and export slider directives + nits
iveysaur 0416839
Update unit test to not use it, describe, etc.
iveysaur File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 { | ||
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; | ||
} |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
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
andslider-container
since it's not immediately obvious what they're used for.