Create a virtual PCF Control

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from "react";
import { SliderComponent } from "./SliderComponent";

export class SliderControl implements ComponentFramework.ReactControl<IInputs, IOutputs> {
	private notifyOutputChanged: () => void;
	private selectedValue: number | undefined;

	/**
	 * Used to initialize the control instance. Controls can kick off remote server calls and other initialization 
	 * actions here.
	 * Data-set values are not initialized here, use updateView.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up
	 * by the customizer mapped to property names defined in the manifest, as well as utility functions.
	 * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to 
	 * be retrieved asynchronously.
	 * @param state A piece of data that persists in one session for a single user. Can be set at any point in a 
	 * controls life cycle by calling 'setControlState' in the Mode interface.
	 * @param container If a control is marked control-type='standard', it will receive an empty div element within 
	 * which it can render its content.
	 */
	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void {
		this.notifyOutputChanged = notifyOutputChanged;
	}

	/**
	 * Called when any value in the property bag has changed. This includes field values, data-sets, global values 
	 * such as container height and width, offline status, control metadata values such as label, visible, etc.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up
	 * by the customizer mapped to names defined in the manifest, as well as utility functions
	 */
	public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
		const { value, configuration } = context.parameters;

		if (value && configuration) {
			return React.createElement(SliderComponent, {configuration: configuration.raw, value: value.raw, onChange: this.onChange});
		}
		return React.createElement("div");
	}

	private onChange = (newValue: number | undefined): void => {
		this.selectedValue = newValue;
		this.notifyOutputChanged();
	};

	/**
	 * It is called by the framework prior to a control receiving new data.
	 * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
	 */
	public getOutputs(): IOutputs {
		return { value: this.selectedValue } as IOutputs;
	}

	/**
	 * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
	 * i.e. cancelling any pending remote calls, removing listeners, etc.
	 */
	public destroy(): void {
		// Add code to cleanup control if necessary
	}
}

import { IInputs, IOutputs } from "./generated/ManifestTypes";
import * as React from "react";
import { SliderComponent } from "./SliderComponent";

export class SliderControl implements ComponentFramework.ReactControl<IInputs, IOutputs> {
	private notifyOutputChanged: () => void;
	private selectedValue: number | undefined;

	/**
	 * Used to initialize the control instance. Controls can kick off remote server calls and other initialization 
	 * actions here.
	 * Data-set values are not initialized here, use updateView.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up
	 * by the customizer mapped to property names defined in the manifest, as well as utility functions.
	 * @param notifyOutputChanged A callback method to alert the framework that the control has new outputs ready to 
	 * be retrieved asynchronously.
	 * @param state A piece of data that persists in one session for a single user. Can be set at any point in a 
	 * controls life cycle by calling 'setControlState' in the Mode interface.
	 * @param container If a control is marked control-type='standard', it will receive an empty div element within 
	 * which it can render its content.
	 */
	public init(context: ComponentFramework.Context<IInputs>, notifyOutputChanged: () => void): void {
		this.notifyOutputChanged = notifyOutputChanged;
	}

	/**
	 * Called when any value in the property bag has changed. This includes field values, data-sets, global values 
	 * such as container height and width, offline status, control metadata values such as label, visible, etc.
	 * @param context The entire property bag available to control via Context Object; It contains values as set up
	 * by the customizer mapped to names defined in the manifest, as well as utility functions
	 */
	public updateView(context: ComponentFramework.Context<IInputs>): React.ReactElement {
		const { value, configuration } = context.parameters;

		if (value && configuration) {
			return React.createElement(SliderComponent, {configuration: configuration.raw, value: value.raw, onChange: this.onChange});
		}
		return React.createElement("div");
	}

	private onChange = (newValue: number | undefined): void => {
		this.selectedValue = newValue;
		this.notifyOutputChanged();
	};

	/**
	 * It is called by the framework prior to a control receiving new data.
	 * @returns an object based on nomenclature defined in manifest, expecting object[s] for property marked as “bound” or “output”
	 */
	public getOutputs(): IOutputs {
		return { value: this.selectedValue } as IOutputs;
	}

	/**
	 * Called when the control is to be removed from the DOM tree. Controls should use this call for cleanup.
	 * i.e. cancelling any pending remote calls, removing listeners, etc.
	 */
	public destroy(): void {
		// Add code to cleanup control if necessary
	}
}

import { Slider } from "@fluentui/react";
import * as React from "react";

enum NoUnknownYes {
    No = 0,
    Unknown = 1,
    Yes = 2
}
enum SliderType {
    NoUnknownYes = '0',
    Percentage = '1'
}

export interface SliderComponentProps {
    value: number | null;
    configuration: string | null;
    onChange: (newValue: number | undefined) => void;
}

export const SliderComponent = React.memo((props: SliderComponentProps) => {
    const { value, configuration, onChange } = props;
    const valueKey = value ?? undefined;
    const sliderValueFormat = (value: number) => `${value}%`;

    const onChangeSlider = React.useCallback(
        (value: number): void => {
            onChange(value);
        },
        [onChange]
    );

    if (configuration === SliderType.NoUnknownYes) {
        return (
            <div className="slider">
                <div className="nounknownyes">
                    <div className="No">No</div>
                    <div className="Unknown">Unknown</div>
                    <div className="Yes">Yes</div>
                </div>
                <Slider min={NoUnknownYes.No} max={NoUnknownYes.Yes} step={1} defaultValue={NoUnknownYes.Unknown} showValue={false} value={valueKey} onChange={onChangeSlider} vertical={false} />
            </div>
        );
    }
    else if (configuration === SliderType.Percentage) {
        return (
            <div className="slider">
                <Slider max={100} valueFormat={sliderValueFormat} showValue value={valueKey} onChange={onChangeSlider} />
            </div>
        );
    }
    else
        return null;
});
SliderComponent.displayName = "SliderComponent";

import { Slider } from "@fluentui/react";
import * as React from "react";

enum NoUnknownYes {
    No = 0,
    Unknown = 1,
    Yes = 2
}
enum SliderType {
    NoUnknownYes = '0',
    Percentage = '1'
}

export interface SliderComponentProps {
    value: number | null;
    configuration: string | null;
    onChange: (newValue: number | undefined) => void;
}

export const SliderComponent = React.memo((props: SliderComponentProps) => {
    const { value, configuration, onChange } = props;
    const valueKey = value ?? undefined;
    const sliderValueFormat = (value: number) => `${value}%`;

    const onChangeSlider = React.useCallback(
        (value: number): void => {
            onChange(value);
        },
        [onChange]
    );

    if (configuration === SliderType.NoUnknownYes) {
        return (
            <div className="slider">
                <div className="nounknownyes">
                    <div className="No">No</div>
                    <div className="Unknown">Unknown</div>
                    <div className="Yes">Yes</div>
                </div>
                <Slider min={NoUnknownYes.No} max={NoUnknownYes.Yes} step={1} defaultValue={NoUnknownYes.Unknown} showValue={false} value={valueKey} onChange={onChangeSlider} vertical={false} />
            </div>
        );
    }
    else if (configuration === SliderType.Percentage) {
        return (
            <div className="slider">
                <Slider max={100} valueFormat={sliderValueFormat} showValue value={valueKey} onChange={onChangeSlider} />
            </div>
        );
    }
    else
        return null;
});
SliderComponent.displayName = "SliderComponent";