Reactive form disable support

[dmoojunk]

Currently Im having fun trying to integrate this into a reactive form that uses form groups - and toggles them on and off with enable() and disable(). This just recursively calls the same on the child controls.

Interestingly, the styling does change, however they are still editable if you click. Here is a small demo - https://stackblitz.com/edit/angular-ivy-cstipf?file=src/app/hello.component.ts

Wondered if this could be supported, or perhaps a workaround suggestion?

Thanks for your library and time!

[mariocalin]

Anything on this issue? I am having the same problem. I disable the control but it keeps being editable in the form.

[hakla]

I fixed this issue and will make a pull request for it next week (I'd like to add some e2e tests for it first).

[SarcevicAntonio]

We could really use a fix about now.

@hakla is there a workaround we can use as consumers?

One half-workaround is to conditionally add a class that adds pointer-events: none; but this only disables mouse input changes, not keyboard input.

[eulersson]

Same issue, I was trying to dynamically change the options dictionary that gets set into the slider. There's an option disabled. But changing it hotly doesn't update the component.

The workaround I am using is to use @ViewChild and select the component. Then calling setDisabledState(trueOrFalse).

A TypeScript problem is that the module does not export the SliderComponent, it only exports the NgxSliderModule, so I cannot tell it is going to be a SliderComponent, instead I have to turn off TypeScript resolution and use the infamous any:

@Component({
  selector: 'mycomp',
  template: `<button (click)="disableSlider()">Disable Slider</button><ngx-slider #mySlider ...></ngx-slider>`
  ...
})
export class MyCompComponent {
    @ViewChild('mySlider') sliderComponent!: any;

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

I created two issues and I am happy to work on them if I get an OK from the mantainers of this project:

• Export SliderComponent in public API so we can benefit from TypeScript when using @ViewChild
• Programmatically disable and enable the slider

[SarcevicAntonio]

This works, but only makes it styled like it's disabled. You can still click and drag the slider 👀

[eulersson]

This works, but only makes it styled like it's disabled. You can still click and drag the slider 👀

That is true 😢

[hakla]

@SarcevicAntonio Sorry for the late reply, I did not find the time to create the e2e tests as I wanted. For our project, I created an npm package that we are using until this is merged into ngx-slider. You can use this as well and switch back to the official slider after it is merged. It is available under the name @hakla/ngx-slider.