How can I invert the track of the slider?

Question

In our design we want the user to select a value between 0 and 20 and have the selected range be that value and up to 20. In the current implementation of the Angular Material slider component, the values from 0 and up to the value selected are highlighted (active track). Is it possible to reverse this?

I did consider trying to reverse the colors in the css, so that the inactive track would look like the active, but the inactive has some opacity applied to it, and I don't know how to adjust that. Anyway, that would be more of a hack.

Thankful for any insight on this.

I've looked at the API and couldn't find any way to reverse the track

Answer 1

If you use a range-slider in the way

<mat-slider class="special" min="200" max="500" >
  <input value="300" matSliderStartThumb [(ngModel)]="value">
  <input value="500" matSliderEndThumb style="display:'none';cursor:'arrow'">
</mat-slider>

The last "thumb" not allow move

If you add in your styles.sccs

.special mat-slider-visual-thumb:last-child .mdc-slider__thumb-knob{
  display:none
}

You "remove" the last knob

Answer 2

One solution is to swap the two numbers and put [step]="-1"

<mat-slider class="special" min="0" max="100" [step]="-1">
  <input value="40" matSliderStartThumb>
  <input value="30" matSliderEndThumb >
</mat-slider>

Answer 3

This might be too late but for posterity, I'll post this anyway. You might want to use ViewEncapsulation.None as opposed to ng-deep. Also adjust or add mat-warn or mat-accent depending on your need.

::ng-deep .mat-mdc-slider.mat-primary .mdc-slider__track--inactive,
::ng-deep .mat-mdc-slider.mat-primary .mdc-slider__track--active,
::ng-deep .mat-mdc-slider.mat-primary .mdc-slider__track--active_fill {
  height: var(
    --mdc-slider-inactive-track-height,
    10px
  ); /*inactive track height*/
  height: var(--mdc-slider-active-track-height, 10px); /*active track height*/

  border-top-width: var(
    --mdc-slider-active-track-height,
    10px
  ); /*active track border height*/
  border-top-color: orange; /*active track color*/
  background-color: lightgrey; /*inactive track color*/
}