angular - 从 Angular Material native 组件创建两个值范围 slider

Question

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

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

但是，我还想在两个 slider 拇指之间添加一个横条，以便突出显示所选范围并使其可见。 native slider 确实有这个，但由于它只允许一个值，因此突出显示从 0 开始并扩展到 slider 的值。

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

或者，如果有人知道如何使 NGX-slider 允许平滑的步骤，如 Angular Material slider ，那将是最好的解决方案，我很想听听。 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);
}

Answer 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 不应具有透明度!