2

I have added a PropertyPaneSlider control to an spfx web part. The control displays on the page and appears to be configured correctly.

I want to get the value of the control from the properties collection in my code but it is undefined. Below is the code in my WebpPart.ts file. What am I doing wrong?

export interface INewsViewerWebPartProps {
  sliderProperty: any;
}

export default class NewsViewerWebPart extends BaseClientSideWebPart<INewsViewerWebPartProps> {        
  private _isDarkTheme: boolean = false;
  private _environmentMessage: string = '';
    
  public render(): void {
      const element: React.ReactElement<INewsViewerProps> = React.createElement(
          NewsViewer,
          {
            sliderProperty: this.properties.sliderProperty,
            isDarkTheme: this._isDarkTheme,
            environmentMessage: this._environmentMessage,
            hasTeamsContext: !!this.context.sdks.microsoftTeams,
            userDisplayName: this.context.pageContext.user.displayName
          }
        );
    
      ReactDom.render(element, this.domElement);
}

protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
    return {
      pages: [
        {
          header: {
            description: strings.PropertyPaneDescription
          },
          groups: [
            {
              groupName: strings.BasicGroupName,
              groupFields: [
                PropertyPaneSlider('sliderProperty', {
                  label: "Max Pages",
                  min: 4,
                  max: 50,
                  value: 8,
                  showValue: true,
                  step: 1
                })
              ]
            }
          ]
        }
      ]
    };
  }

1 Answer 1

2

your property should be in your webpart.manifest.json

 "preconfiguredEntries": [{
     "groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Advanced
     "group": { "default": "Advanced" },
     "title": { "default": "testOnly" },
     "description": { "default": "testOnly description" },
     "officeFabricIconFontName": "Page",
     "properties": {
       "description": "testOnly",
       "sliderProperty": "1"
     }   }]

And in your interface

export interface INewsViewerWebPartProps {
  sliderProperty: number
}
2

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.