修改index.ts文件会报一些错误但是可以忽略，可以继续执行，执行正常的话错误没有影响

import { IInputs, IOutputs } from "./generated/ManifestTypes";

export class LinearInputControl implements ComponentFramework.StandardControl {
private _value: number;
private _notifyOutputChanged: () => void;
private labelElement: HTMLLabelElement;
private inputElement: HTMLInputElement;
private _container: HTMLDivElement;
private _context: ComponentFramework.Context;
private _refreshData: EventListenerOrEventListenerObject;

public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void, state: ComponentFramework.Dictionary, container: HTMLDivElement): void {  
    this.\_context = context;  
    this.\_container = document.createElement("div");  
    this.\_notifyOutputChanged = notifyOutputChanged;  
    this.\_refreshData = this.refreshData.bind(this);

    // creating HTML elements for the input type range and binding it to the function which refreshes the control data  
    this.inputElement = document.createElement("input");  
    this.inputElement.setAttribute("type", "range");  
    this.inputElement.addEventListener("input", this.\_refreshData);

    //setting the max and min values for the control.  
    this.inputElement.setAttribute("min", "1");  
    this.inputElement.setAttribute("max", "1000");  
    this.inputElement.setAttribute("class", "linearslider");  
    this.inputElement.setAttribute("id", "linearrangeinput");

    // creating a HTML label element that shows the value that is set on the linear range control  
    this.labelElement = document.createElement("label");  
    this.labelElement.setAttribute("class", "LinearRangeLabel");  
    this.labelElement.setAttribute("id", "lrclabel");

    // retrieving the latest value from the control and setting it to the HTMl elements.  
    this.\_value = context.parameters.controlValue.raw!;  
    this.inputElement.setAttribute("value", context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "0");  
    this.labelElement.innerHTML = context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "0";

    // appending the HTML elements to the control's HTML container element.  
    this.\_container.appendChild(this.inputElement);  
    this.\_container.appendChild(this.labelElement);  
    container.appendChild(this.\_container);  
}

public refreshData(evt: Event): void {  
    this.\_value = (this.inputElement.value as any) as number;  
    this.labelElement.innerHTML = this.inputElement.value;  
    this.\_notifyOutputChanged();  
}

public updateView(context: ComponentFramework.Context<IInputs>): void {  
    // storing the latest context from the control.  
    this.\_value = context.parameters.controlValue.raw!;  
    this.\_context = context;  
    this.inputElement.setAttribute("value", context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "");  
    this.labelElement.innerHTML = context.parameters.controlValue.formatted ? context.parameters.controlValue.formatted : "";  
}

public getOutputs(): IOutputs {  
    return {  
        controlValue: this.\_value  
    };  
}

public destroy(): void {  
    this.inputElement.removeEventListener("input", this.\_refreshData);  
}  

}

官方的

样式：

需要在根目录下创建一个css文件夹然后添加LinearInputControl.css

.SampleNamespace\.LinearInputControl input[type=range].linearslider {
margin: 1px 0;
background:transparent;
-webkit-appearance:none;
width:100%;padding:0;
height:24px;
-webkit-tap-highlight-color:transparent
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider:focus {
outline: none;
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-webkit-slider-runnable-track {
background: #666;
height:2px;
cursor:pointer
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-webkit-slider-thumb {
background: #666;
border:0 solid #f00;
height:24px;
width:10px;
border-radius:48px;
cursor:pointer;
opacity:1;
-webkit-appearance:none;
margin-top:-12px
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-moz-range-track {
background: #666;
height:2px;
cursor:pointer
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-moz-range-thumb {
background: #666;
border:0 solid #f00;
height:24px;
width:10px;
border-radius:48px;
cursor:pointer;
opacity:1;
-webkit-appearance:none;
margin-top:-12px
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-ms-track {
background: #666;
height:2px;
cursor:pointer
}
.SampleNamespace\.LinearInputControl input[type=range].linearslider::-ms-thumb {
background: #666;
border:0 solid #f00;
height:24px;
width:10px;
border-radius:48px;
cursor:pointer;
opacity:1;
-webkit-appearance:none;
}

这个名字和xml里的相对应