How to develop a angular mat slider like attached image

user_12250834 0
Viewed 1419

I am looking for a option to do a angular mat slider as attached. enter image description here

I am develop something like the below using overriding the style of mat slider. But unable to do the following.

enter image description here

  1. Adding two small lines inside the square box.
  2. Adding custom color for the second part of the slider.( use light blue color instead of grey color. )

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
2 Answers

you can use ::ng-deep to add custom css to mat-slider class i have created a stackblitz for you. hope i have gave you hint how to customise more. i have used a link for image(so image load is slow) you can edit according to you and ask any other query. upvote if answer meets yours expectations.

Admin1

i think you can take use of ViewEncapsulation - [https://angular.io/api/core/ViewEncapsulation][1]

Than you can use your styliing in component.

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