从 Angular 材质原生组件创建两个值范围滑块答案

【问题标题】：Creating two value range slider from Angular material native component从 Angular 材质原生组件创建两个值范围滑块
【发布时间】：2021-01-19 21:38:29
【问题描述】：

我的应用程序需要一个两个值范围的滑块，但是我在 NPM 等上查看的包都不是 100% 适合我需要的。 Angular Material 滑块是最合适的，但是它不允许在一个滑块上使用两个值。

为了解决这个问题，我想到了将一个滑块放在另一个滑块上，以给人一种具有两个值的滑块的印象。这很好用，并且具有流畅的行为，这是我希望我的滑块具有的要求之一。

但是，我还想在两个滑块之间添加一个条，以便突出显示所选范围并可见。原生滑块确实有这个，但由于它只允许一个值，所以突出显示从 0 开始并延伸到滑块的值。

相反，我希望在滑块上拇指的上下值之间突出显示。但我不知道如何添加它。所以我想知道是否有人可以帮助我。我不完全确定是否需要在栏顶部添加一个新元素以调整两个拇指之间的大小，或者我是否必须做一些不同的事情。

或者，如果有人知道如何使 NGX 滑块允许像有角材料滑块这样的平滑步骤，那将是最好的解决方案，我很想听听。 https://www.npmjs.com/package/@angular-slider/ngx-slider

https://angular-9-material-starter-5ueh7p.stackblitz.io

到目前为止的代码

<mat-slider class="slider-left"></mat-slider>
<mat-slider class="slider-right"></mat-slider>

.slider-right {
  position: relative;
  left: -128px;
}

::ng-deep .mat-slider-track-fill {
  background-color: rgba(0, 0, 0, 0.26) !important;
}

::ng-deep .mat-slider-track-background {
  background-color: rgba(0, 0, 0, 0.26);
}

【问题讨论】：

标签： angular angular-material

【解决方案1】：

我认为您可以使用以下代码实现：

<mat-slider id="to-slider"></mat-slider>
<mat-slider id="from-slider"></mat-slider>

#from-slider {
  margin-top: -75px;
}

 ::ng-deep {
  #from-slider {
    .mat-slider-track-fill {
      background-color: GRAY_COLOR;
    }
    .mat-slider-track-background {
      background-color: transparent;
    }
  }
  #to-slider {
    .mat-slider-track-background {
      background-color: GRAY_COLOR;
    }
  }
}

请注意，GRAY_COLOR 不应该有透明度！

【讨论】：