Using property pane default controls

In the previous chapter, we defined two properties for our products web part through the IPackProductCatalogWebPartProps interface (itemsCount for the number of tiles to display and productsListName for the SharePoint where the data is). However, we only set the values statically in the web part manifest file and/or use web part top actions.

To provide more flexibility, we will now surface these settings in the property pane so users can set their own values for the list name and the number of tiles to display.

Defining the Slider field

We first start with the itemsCount property. As it is a number data type, we can use the default SIider property pane field (PropertyPaneSlider):

We add the following code to the main Web Part class:

import {
  PropertyPaneSlider,
  type IPropertyPaneConfiguration,
} from '@microsoft/sp-property-pane';
...
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration...