Add Slider component (#14774)

* initial

* more cleanup

* update types

src/sql/workbench/api/common/extHostModelView.ts

@@ -272,6 +272,14 @@ class ModelBuilderImpl implements azdata.ModelBuilder {
 		return builder;
 	}
 
+	slider(): azdata.ComponentBuilder<azdata.SliderComponent, azdata.SliderComponentProperties> {
+		const id = this.getNextComponentId();
+		const builder: ComponentBuilderImpl<azdata.SliderComponent, azdata.SliderComponentProperties> = this.getComponentBuilder(new SliderComponentWrapper(this._proxy, this._handle, id), id);
+
+		this._componentBuilders.set(id, builder);
+		return builder;
+	}
+
 	getComponentBuilder<T extends azdata.Component, TPropertyBag extends azdata.ComponentProperties>(component: ComponentWrapper, id: string): ComponentBuilderImpl<T, TPropertyBag> {
 		let componentBuilder: ComponentBuilderImpl<T, TPropertyBag> = new ComponentBuilderImpl<T, TPropertyBag>(component);
 		this._componentBuilders.set(id, componentBuilder);
@@ -2022,6 +2030,65 @@ class InfoBoxComponentWrapper extends ComponentWrapper implements azdata.InfoBox
 	}
 }
 
+class SliderComponentWrapper extends ComponentWrapper implements azdata.SliderComponent {
+	constructor(proxy: MainThreadModelViewShape, handle: number, id: string) {
+		super(proxy, handle, ModelComponentTypes.Slider, id);
+		this.properties = {};
+		this._emitterMap.set(ComponentEventType.onDidChange, new Emitter<number>());
+		this._emitterMap.set(ComponentEventType.onInput, new Emitter<number>());
+	}
+
+	public get min(): number | undefined {
+		return this.properties['min'];
+	}
+
+	public set min(v: number | undefined) {
+		this.setProperty('min', v);
+	}
+
+	public get max(): number | undefined {
+		return this.properties['max'];
+	}
+
+	public set max(v: number | undefined) {
+		this.setProperty('max', v);
+	}
+
+	public get step(): number | undefined {
+		return this.properties['step'];
+	}
+
+	public set step(v: number | undefined) {
+		this.setProperty('step', v);
+	}
+
+	public get value(): number | undefined {
+		return this.properties['value'];
+	}
+
+	public set value(v: number | undefined) {
+		this.setProperty('value', v);
+	}
+
+	public get showTicks(): boolean | undefined {
+		return this.properties['showTicks'];
+	}
+
+	public set showTicks(v: boolean | undefined) {
+		this.setProperty('showTicks', v);
+	}
+
+	public get onChanged(): vscode.Event<number> {
+		const emitter = this._emitterMap.get(ComponentEventType.onDidChange);
+		return emitter!.event;
+	}
+
+	public get onInput(): vscode.Event<number> {
+		const emitter = this._emitterMap.get(ComponentEventType.onInput);
+		return emitter!.event;
+	}
+}
+
 class GroupContainerComponentWrapper extends ComponentWrapper implements azdata.GroupContainer {
 	constructor(proxy: MainThreadModelViewShape, handle: number, type: ModelComponentTypes, id: string) {
 		super(proxy, handle, type, id);