Custom widget "Hello, World!" Issue

hi, i'm practice custom widget

TW.IDE.Widgets.helloWorld = function () {
  this.widgetIconUrl = function() {
      return  "../Common/extensions/HelloWorld_ExtensionPackage/ui/helloWorld/helloWorld.ide.png";
  };
  
  this.widgetProperties = function () {
    return {
      "name": "Hello, World!",
      "description": "An example widget.",
      "category": ['Common'],
      "properties": {
      "Salutation": {
          "baseType": "STRING",
          "defaultValue": "Hello, World!",
          "isBindingTarget": true
        },
        
        "TextSize":{
        "baseType":"NUMBER",
        "defaultValue":22,
        "isBindingTarget":true     
        }      
        }
    };
  };
  
  this.renderHtml = function () {
    return "<div class=\"widget-content widget-helloWorld\">" +
             "<span style=font-size: "+ this.getProperty("TextSize") +"px;>" + this.getProperty("Salutation") + "</span>" +
           "</div>";
  };
  
  this.afterSetProperty = function (name, value) {
    return true;
  };
  this.widgetEvents = function () {
      return {
          'Updated': {}
      }
  };
};

Hello, World We tried to construct a user widget that adjusts the font size by moving the slider using the example.(29 line)

However, the font size does not change.

The content inside is also unchanged.

How do I show the values that are bound in the widget?