Skip to content

Commit

Permalink
refactor(slider): Use animation constants. Add value indicator caret …
Browse files Browse the repository at this point in the history
…color to theming mixin.

PiperOrigin-RevId: 327679183
  • Loading branch information
joyzhong authored and copybara-github committed Aug 20, 2020
1 parent e27c580 commit f4532b9
Show file tree
Hide file tree
Showing 3 changed files with 16 additions and 4 deletions.
7 changes: 7 additions & 0 deletions packages/mdc-slider/_slider-theme.scss
Original file line number Diff line number Diff line change
Expand Up @@ -153,6 +153,13 @@ $tick-mark-opacity: 0.6;
opacity: $opacity;
}
}

// Caret.
.mdc-slider__value-indicator::before {
@include feature-targeting.targets($feat-color) {
@include theme.property(border-top-color, $color);
}
}
}

///
Expand Down
8 changes: 4 additions & 4 deletions packages/mdc-slider/_slider.scss
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
// Selector '.mdc-*' should only be used in this project.
// stylelint-disable selector-class-pattern

@use '@material/animation/animation';
@use '@material/elevation/mixins' as elevation-mixins;
@use '@material/feature-targeting/feature-targeting';
@use '@material/ripple/ripple';
Expand Down Expand Up @@ -299,7 +300,7 @@ $_track-inactive-height: 4px;

.mdc-slider__value-indicator {
@include feature-targeting.targets($feat-animation) {
transition: transform 100ms cubic-bezier(0.4, 0, 1, 1);
transition: animation.exit-permanent(transform, 100ms);
}

@include feature-targeting.targets($feat-structure) {
Expand All @@ -318,8 +319,7 @@ $_track-inactive-height: 4px;
@include feature-targeting.targets($feat-structure) {
border-left: $_value-indicator-caret-width solid transparent;
border-right: $_value-indicator-caret-width solid transparent;
border-top: $_value-indicator-caret-width solid
slider-theme.$value-indicator-color;
border-top: $_value-indicator-caret-width solid;
bottom: -$_value-indicator-caret-width + 1;
content: '';
height: 0;
Expand All @@ -333,7 +333,7 @@ $_track-inactive-height: 4px;

.mdc-slider__thumb--with-indicator .mdc-slider__value-indicator {
@include feature-targeting.targets($feat-animation) {
transition: transform 100ms cubic-bezier(0, 0, 0.2, 1);
transition: animation.enter(transform, 100ms);
}

@include feature-targeting.targets($feat-structure) {
Expand Down
5 changes: 5 additions & 0 deletions packages/mdc-slider/foundation.ts
Original file line number Diff line number Diff line change
Expand Up @@ -318,6 +318,11 @@ export class MDCSliderFoundation extends MDCFoundation<MDCSliderAdapter> {
}
}

/** @return Whether the slider is a range slider. */
getIsRange() {
return this.isRange;
}

/**
* - Syncs slider boundingClientRect with the current DOM.
* - Updates UI based on internal state.
Expand Down

0 comments on commit f4532b9

Please sign in to comment.