Как разработать угловой матовый слайдер, как прикрепленное изображение

Question

Ищу вариант сделать угловой матовый слайдер как прилагается. введите описание изображения здесь

Я разрабатываю что-то похожее на приведенное ниже, используя переопределение стиля слайдера матов. Но не в состоянии сделать следующее.

введите описание изображения здесь

1. Добавление двух маленьких линий внутри квадратной рамки.
2. Добавление пользовательского цветадля второй части слайдера. (используйте светло-голубой цвет вместо серого.)

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

Answer 1

вы можете использовать :: ng-deep , чтобы добавить пользовательский CSS в класс мат-слайдера. Я создал stackblitz для вас. надеюсь, я дал вам подсказку, как настроить больше. Я использовал ссылку для изображения (поэтому загрузка изображения идет медленно), вы можете редактировать в соответствии с вашими предпочтениями и задавать любые другие запросы. upvote, если ответ соответствует вашим ожиданиям.

Answer 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() { }
}