slider.scss

@use '@material/slider/slider' as mdc-slider;
@use '@material/slider/slider-theme' as mdc-slider-theme;
@use '../core/mdc-helpers/mdc-helpers';

@include mdc-helpers.disable-mdc-fallback-declarations {
  @include mdc-slider.static-styles($query: mdc-helpers.$mdc-base-styles-query);
}

$mat-slider-min-size: 128px !default;
$mat-slider-horizontal-margin: 8px !default;

// Overwrites the mdc-slider default styles to match the visual appearance of the
// Angular Material standard slider. This involves making the slider an inline-block
// element, aligning it in the vertical middle of a line, specifying a default minimum
// width and adding horizontal margin.
.mat-mdc-slider {
  @include mdc-helpers.disable-mdc-fallback-declarations {
    @include mdc-slider-theme.theme-styles(mdc-slider-theme.$light-theme);
  }

  display: inline-block;
  box-sizing: border-box;
  outline: none;
  vertical-align: middle;
  margin: {
    left: $mat-slider-horizontal-margin;
    right: $mat-slider-horizontal-margin;
  }

  // Unset the default "width" property from the MDC slider class. We don't want
  // the slider to automatically expand horizontally for backwards compatibility.
  width: auto;
  min-width: $mat-slider-min-size - (2 * $mat-slider-horizontal-margin);

  .mdc-slider__value-indicator {
    // There's no token to control this opacity so we have to do it ourselves.
    opacity: var(--mat-mdc-slider-value-indicator-opacity, 1);
  }

  // The `.mat-ripple` wrapper here is redundant, but we need it to
  // increase the specificity due to how some styles are setup in g3.
  .mat-ripple {
    // These ripple colors are custom so we have to introduce our own tokens.
    .mat-ripple-element {
      background-color: var(--mat-mdc-slider-ripple-color, transparent);
    }

    .mat-mdc-slider-hover-ripple {
      background-color: var(--mat-mdc-slider-hover-ripple-color, transparent);
    }

    .mat-mdc-slider-focus-ripple, .mat-mdc-slider-active-ripple {
      background-color: var(--mat-mdc-slider-focus-ripple-color, transparent);
    }
  }

  &._mat-animation-noopable {
    &.mdc-slider--discrete .mdc-slider__thumb,
    &.mdc-slider--discrete .mdc-slider__track--active_fill,
    .mdc-slider__value-indicator {
      transition: none;
    }
  }

  // Slider components have to set `border-radius: 50%` in order to support density scaling
  // which will clip a square focus indicator so we have to turn it into a circle.
  .mat-mdc-focus-indicator::before {
    border-radius: 50%;
  }
}

// In the MDC slider the focus indicator is inside the thumb.
.mdc-slider__thumb--focused .mat-mdc-focus-indicator::before {
  content: '';
}