Programmatically disable and enable the slider

[eulersson]

I can't manage to enable or disable the component unless I get hold of the component in my hosting component and interact with its API:

@Component({
  selector: 'mycomp',
  template: `<button (click)="disableSlider()">Disable Slider</button><ngx-slider #mySlider ...></ngx-slider>`
  ...
})
export class MyCompComponent {
    @ViewChild('mySlider') sliderComponent!: any; // <-- I would like to use SliderComponent from this tool package.

    disableSlider() {
      this.sliderComponent?.setDisabledState(true);
    }
    
}

Even if I do this the slider can still be moved despite being in disabled state.

I also tried playing with the Options's disabled from here and it won't work.

Wouldn't it be better to have a [disabled] @Input in the component?

How can I easily change the disabled state and enable it back on?