Changing starting position of mat-slider

Question

I am working on mat-slider. I want to place thumb in middle and start sliding left and right. My code is as follows

https://stackblitz.com/edit/angular-9unenq-utcytk?file=app%2Fslider-overview-example.html

I am able to move thumb in middle. The problem is yellow color is starting from left only even if thumb is in middle. I want to start yellow color to start from middle depending on whether thumb is moved left or right. If thumb is moved left then yellow line should go towards left and similarly for right side movement. How can I do that?

Answer 1

As I've seen in the documentation, there is no such possibility. Instead, I recommend using the ngx-slider library, it's even easier to use and is much more powerful. Theres an use case exactly as the one you talk about in their demos at https://angular-slider.github.io/ngx-slider/demos link to npm: https://www.npmjs.com/package/@angular-slider/ngx-slider