Is it possible to disable the click event on the range line when it is triggered? I couldn't find any solution.

Slide Example

CodePudding user response：

I assume you want to keep the click event on the slider thumb?

See the forked stackblitz.

Basically you apply some custom class to your slider (e.g noclick), remove pointer-events on the whole thing, and re-add them on them on the thumbnail only.

Note that the class styling is placed in the global styles.css - this is because from your component you can't "pierce" outside your component to angular classes (unless you disable encapsulation, which I would advise against).

Code itself in case stackblitz went down:

.noclick {
  pointer-events: none;
}

.noclick .mat-slider-wrapper .mat-slider-thumb-container {
  pointer-events: all;
}

The solution is not perfect, since clicking on the slider track won't focus the component. I think you could try to work around it - e.g. fetching the instance of slider using @ViewChild, accessing the private properties of the slider to intercept the click event, check whether it originated on track or thumb, join this into the change observable and use this instead of the original change event. But this seems way too hacky for my taste to be honest and personally I would instead create custom slider component with the wanted behavior.