Sharepoint - Hide/Disable property pane component based on another component's value

You can make use of a standard boolean check to determine whether your toggle component has value. Based on that, you can show/hide your slider component. You can do this bool check in the getPropertyPaneConfiguration method itself as below. Here, if the toggle component is off, we will show an emptly label.

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    let allEventsUrl: any;

    if (this.properties.toggleAllEvents) {
      allEventsUrl = PropertyPaneSlider('maxEvents', {
        label: "Max events",
        min: 1,
        max: 10,
        value: 1,
        showValue: true,
        step: 1
      })
    }
    else {
      allEventsUrl = PropertyPaneLabel('emptyLabel', {
        text: ""
      });
    }
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneToggle('toggleAllEvents', {
                  key: 'toggleAllEvents',
                  label: '',
                  checked: false,
                  onText: "Some text",
                  offText: "Some other text",
                }),
                allEventsUrl
              ]
            }
          ]
        }
      ]
    };
  }

End result:

Image 1 - toggle off

enter image description here

Image 2 - toggle on

enter image description here

Tags:

Spfx