How to disable part of Angular material slider

Question

For part of a project I'm working on, I want to be able to create a slider that shows an age range of 0-100, but the slider needs to stop at a certain point, like 18 years old.

I still want to show 0-18, but the user should only be able to slide through ages 19-100.

The project is using Angular Materials but I don't see any way to achieve what I want. I have already tried the Documentation https://material.angular.io/components/slider/overview and searching through Google but no luck.

Here's the code

<mat-slider min="0" max="100" step="1" value="20"></mat-slider>

This is what I want to do

<mat-slider min="0" max="100" start="19" end="100" step="1" value="20"></mat-slider>

Answer 1

I don't think there's any good way to do this, but there is a clumsy way. You can listen to the change event when the thumb is released and then set the value back to your minimum. The problem is that the user is still able to drag the slider thumb and release it at values below your minimum, and when they do it just bounces back to the minimum. Also there is no visual indication of the minimum or why it bounces back (you'd have to add something to your UI).

<mat-slider min="0" max="100" step="1" value="20" (change)="sliderChange($event)">
</mat-slider>

sliderChange(event) {
    if (event.value < 19) {
        setTimeout(() => event.source.value = 19);
    }
}

You can also use the same technique on the (input) event (every time the thumb is moved) but that behaves a bit erratically.