Slider: how to toggle disabled state?

[nephix]

Hey zaggers 👋

How can I toggle the disabled state on a slider component?

I have a minimal example here where I simply pass the disabled prop to useMachine.

When clicking the toggle disabled button you can see that the thumb opacity changes, but you are still able to change the slider value. (Thumb doesn't move but I think that's just to due my minimal example)

Ideally I would like to:

• change disabled state via props, or
• have an api.setDisabled() to set it from within the component

Any ideas how that can be achieved?

[segunadebayo]

In this case, you can update the machine context transiently.

Here's the Sandbox:
https://codesandbox.io/s/musing-banach-k882pd?file=/src/Slider.js

[nephix]

Ah I didn't know, thanks a lot @segunadebayo 🙏