如何开发像附加图像一样的角垫滑块答案

【问题标题】：How to develop a angular mat slider like attached image如何开发像附加图像一样的角垫滑块
【发布时间】：2019-10-21 22:07:28
【问题描述】：

我正在寻找一个选项来做一个附加的角垫滑块。 enter image description here

我正在开发类似下面的东西，使用覆盖垫滑块的样式。但无法执行以下操作。

enter image description here

在方框内添加两条小线。
为滑块的第二部分添加自定义颜色。（使用浅蓝色而不是灰色。）

HTML：

  <mat-slider [(ngModel)]="value1"></mat-slider>

   **styles.sass:**

    .mat-slider.mat-slider-horizontal .mat-slider-wrapper 
      top: 18px

    .mat-slider.mat-slider-horizontal .mat-slider-track-wrapper 
      height: 12px
      border-radius: 10px

    .mat-slider.mat-slider-horizontal .mat-slider-track-background,
    .mat-slider.mat-slider-horizontal .mat-slider-track-fill 
      height: 100%

    .mat-slider.mat-slider-horizontal .mat-slider-track-fill 
      background-color: #7eacff

    .mat-accent .mat-slider-thumb 
      height: 30px
      width: 30px
      background-color: white
      border: solid 2px #f6f7f8
      bottom: -20px
      right: -20px

    .mat-slider-min-value:not(.mat-slider-thumb-label-showing) .mat-slider-thumb 
      background-color: white


    .mat-form-field 
        width: 85px
    .mat-progress-spinner circle, .mat-spinner circle
        stroke: #3fb53f
    .mat-accent .mat-slider-thumb
        height: 30px
        width: 30px
        background-color: white
        /* border: solid 1px #003087; */
        bottom: -20px
        right: -20px
        border-radius: 8px

【问题讨论】：

到目前为止你尝试过什么代码？你能编辑你的问题并添加它吗？

标签： angular slider

【解决方案1】：

您可以使用 ::ng-deep 将自定义 css 添加到 mat-slider 类中，我为您创建了一个 stackblitz。希望我给了你提示如何定制更多。我已经使用了图像链接（因此图像加载速度很慢）您可以根据您的需要进行编辑并询问任何其他查询。如果答案符合您的期望，请点赞。

【讨论】：

请问这里的DemoMaterialModule是什么？
'DemoMaterialModule' 是我的主模块（如 appmodule）。实际上我因为匆忙而在我的主模块中导入了所有材料组件。但你只能导入你正在使用的那些。

【解决方案2】：

我认为您可以使用 ViewEncapsulation - [https://angular.io/api/core/ViewEncapsulation][1]

你可以在组件中使用你的样式。

import {Component} from '@angular/core';
import {ViewEncapsulation} from '@angular/core';

@Component({
  selector: 'slider-overview-example',
  templateUrl: 'slider-overview-example.html',
  styleUrls: ['slider-overview-example.css'],
  encapsulation: ViewEncapsulation.None
})

export class SliderOverviewExample {
  constructor() { }
}

【讨论】：