Angular material slider thumb indicator style issue

I am using Angular 17 (CLI Version: 17.1.0) with Angular Material version 17.3.10. I have standalone components setting disabled in my project. I am using mat slider in my component after importing MatSliderModule in the module and added this code as per the functionality.

<div *ngIf="item.question_type==1" class="que-opt-horizontal">
<span>{{item.opt_hor_min_label_text}}</span>
<mat-slider min="1" [max]="item.opt_hor_entry_count" thumbLabel tickInterval="1" step="1" showTickMarks discrete
[disableRipple]="true">
<input matSliderThumb [(ngModel)]="item.response_text" />
</mat-slider>
<span>{{item.opt_hor_max_label_text}}</span>
</div>


I am not getting the UI as expected in my app.

Expected slider UI

UI in my app

I am not sure why the indicator is not showing like a water droplet.

I have not added any styles externally related to the slider except this in the styles.scss

@use '@angular/material' as mat;

@include mat.core();

$assessment-ui-primary: mat.define-palette(mat.$indigo-palette);
$assessment-ui-accent: mat.define-palette(mat.$light-green-palette, 700, 600, 800);
$assessment-ui-warn: mat.define-palette(mat.$red-palette);

$assessment-ui-theme: mat.define-light-theme((color: (primary: $assessment-ui-primary,
accent: $assessment-ui-accent,
warn: $assessment-ui-warn,
),
));

@include mat.all-component-themes($assessment-ui-theme);

$primary: mat.get-color-from-palette($assessment-ui-primary);
$accent: mat.get-color-from-palette($assessment-ui-accent);


how can I change the indicator style as shown in the angular material documentation

Continue reading...