@effindomv2/fui-as 0.1.12 → 0.1.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@effindomv2/fui-as",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "private": false,
   "license": "AGPL-3.0-only OR LicenseRef-EffinDom-Commercial",
   "description": "EffinDom v2 AssemblyScript frontend framework SDK and browser harness",

package/src/Fui.ts

@@ -148,10 +148,12 @@ export {
   ControlTemplateSet,
   ContextMenu,
   Dialog,
+  DropdownSizing,
   DropdownChevronPresenter,
   DropdownChevronTemplate,
   DropdownChevronVisualState,
   Dropdown,
+  DropdownFieldMetrics,
   DropdownFieldPresenter,
   DropdownFieldTemplate,
   DropdownFieldVisualState,
@@ -164,6 +166,7 @@ export {
   getControlTemplates,
   MenuItem,
   NavLink,
+  LabeledControlSizing,
   PressableIndicatorMetrics,
   ProgressBar,
   RadioIndicatorPresenter,
@@ -173,6 +176,7 @@ export {
   RadioGroup,
   SelectionArea,
   Slider,
+  SliderSizing,
   SliderPresenter,
   SliderPresenterMetrics,
   SliderTemplate,

package/src/controls/Checkbox.ts

@@ -2,6 +2,7 @@ import { Callback1, Handler1 } from "../core/BoundCallback";
 import { SemanticCheckedState, SemanticRole } from "../core/ffi";
 import { PersistedInt32Codec, PersistedValueState } from "../core/PersistedState";
 import { bind1 } from "../core/bind";
+import { LabeledControlSizing } from "./ControlSizing";
 import { getControlTemplates } from "./ControlTemplateSet";
 import { activeTheme } from "../core/Theme";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
@@ -9,7 +10,7 @@ import {
   CheckboxIndicatorPresenter,
   CheckboxIndicatorTemplate,
   CheckboxIndicatorVisualState,
-  defaultCheckboxIndicatorTemplate,
+  createDefaultCheckboxIndicatorPresenter,
 } from "./internal/CheckboxIndicatorPresenter";
 const CHECKBOX_PERSISTED_CODEC = new PersistedInt32Codec();
 
@@ -39,18 +40,21 @@ class PersistedCheckboxState extends PersistedValueState<Checkbox, i32> {
 
 const CHECKBOX_PERSISTED_STATE = new PersistedCheckboxState();
 
-function createIndicatorPresenter(template: CheckboxIndicatorTemplate | null): CheckboxIndicatorPresenter {
+function createIndicatorPresenter(template: CheckboxIndicatorTemplate | null, sizing: LabeledControlSizing | null = null): CheckboxIndicatorPresenter {
   if (template !== null) {
     return template.create();
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.checkboxIndicator : null;
-  return (appTemplate === null ? defaultCheckboxIndicatorTemplate : appTemplate).create();
+  return appTemplate === null
+    ? createDefaultCheckboxIndicatorPresenter(sizing)
+    : appTemplate.create();
 }
 
 export class Checkbox extends PressableLabeledControl {
   private indicatorPresenter: CheckboxIndicatorPresenter;
   private templateOverride: CheckboxIndicatorTemplate | null = null;
+  private sizingValue: LabeledControlSizing | null = null;
   private checkedStateValue: SemanticCheckedState = SemanticCheckedState.False;
   private triStateEnabled: bool = false;
   private changedCallback: ((state: SemanticCheckedState) => void) | null = null;
@@ -94,9 +98,22 @@ export class Checkbox extends PressableLabeledControl {
     return this;
   }
 
+  sizing(sizing: LabeledControlSizing | null): this {
+    this.sizingValue = sizing;
+    this.setLabelFontSizeOverride(
+      sizing !== null && sizing.hasLabelFontSize ? sizing.labelFontSizePx : 0.0,
+    );
+    if (this.usesDefaultIndicatorPresenter()) {
+      this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
+      this.replaceIndicatorRoot(this.indicatorPresenter.root);
+      this.syncVisualState();
+    }
+    return this;
+  }
+
   template(template: CheckboxIndicatorTemplate | null): this {
     this.templateOverride = template;
-    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride);
+    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
     this.replaceIndicatorRoot(this.indicatorPresenter.root);
     this.syncVisualState();
     return this;
@@ -178,4 +195,12 @@ export class Checkbox extends PressableLabeledControl {
     }
   }
 
+  private usesDefaultIndicatorPresenter(): bool {
+    if (this.templateOverride !== null) {
+      return false;
+    }
+    const templateSet = getControlTemplates();
+    return templateSet === null || templateSet.checkboxIndicator === null;
+  }
+
 }

package/src/controls/ControlSizing.ts

@@ -0,0 +1,158 @@
+import { warn } from "../core/Logger";
+
+function sanitizePositive(owner: string, property: string, value: f32): f32 {
+  if (value <= 0.0) {
+    warn("Layout", owner + "." + property + "() received " + value.toString() + "; ignoring.");
+    return 0.0;
+  }
+  return value;
+}
+
+export class LabeledControlSizing {
+  private indicatorSizeValue: f32 = 0.0;
+  private labelFontSizeValue: f32 = 0.0;
+
+  indicatorSize(value: f32): this {
+    this.indicatorSizeValue = sanitizePositive("LabeledControlSizing", "indicatorSize", value);
+    return this;
+  }
+
+  labelFontSize(value: f32): this {
+    this.labelFontSizeValue = sanitizePositive("LabeledControlSizing", "labelFontSize", value);
+    return this;
+  }
+
+  get hasIndicatorSize(): bool {
+    return this.indicatorSizeValue > 0.0;
+  }
+
+  get hasLabelFontSize(): bool {
+    return this.labelFontSizeValue > 0.0;
+  }
+
+  get indicatorSizePx(): f32 {
+    return this.indicatorSizeValue;
+  }
+
+  get labelFontSizePx(): f32 {
+    return this.labelFontSizeValue;
+  }
+}
+
+export class SliderSizing {
+  private thumbSizeValue: f32 = 0.0;
+  private trackThicknessValue: f32 = 0.0;
+
+  thumbSize(value: f32): this {
+    this.thumbSizeValue = sanitizePositive("SliderSizing", "thumbSize", value);
+    return this;
+  }
+
+  trackThickness(value: f32): this {
+    this.trackThicknessValue = sanitizePositive("SliderSizing", "trackThickness", value);
+    return this;
+  }
+
+  get hasThumbSize(): bool {
+    return this.thumbSizeValue > 0.0;
+  }
+
+  get hasTrackThickness(): bool {
+    return this.trackThicknessValue > 0.0;
+  }
+
+  get thumbSizePx(): f32 {
+    return this.thumbSizeValue;
+  }
+
+  get trackThicknessPx(): f32 {
+    return this.trackThicknessValue;
+  }
+}
+
+export class DropdownSizing {
+  private fieldFontSizeValue: f32 = 0.0;
+  private optionFontSizeValue: f32 = 0.0;
+  private fieldHeightValue: f32 = 0.0;
+  private optionHeightValue: f32 = 0.0;
+  private chevronBoxSizeValue: f32 = 0.0;
+  private chevronIconSizeValue: f32 = 0.0;
+
+  fieldFontSize(value: f32): this {
+    this.fieldFontSizeValue = sanitizePositive("DropdownSizing", "fieldFontSize", value);
+    return this;
+  }
+
+  optionFontSize(value: f32): this {
+    this.optionFontSizeValue = sanitizePositive("DropdownSizing", "optionFontSize", value);
+    return this;
+  }
+
+  fieldHeight(value: f32): this {
+    this.fieldHeightValue = sanitizePositive("DropdownSizing", "fieldHeight", value);
+    return this;
+  }
+
+  optionHeight(value: f32): this {
+    this.optionHeightValue = sanitizePositive("DropdownSizing", "optionHeight", value);
+    return this;
+  }
+
+  chevronBoxSize(value: f32): this {
+    this.chevronBoxSizeValue = sanitizePositive("DropdownSizing", "chevronBoxSize", value);
+    return this;
+  }
+
+  chevronIconSize(value: f32): this {
+    this.chevronIconSizeValue = sanitizePositive("DropdownSizing", "chevronIconSize", value);
+    return this;
+  }
+
+  get hasFieldFontSize(): bool {
+    return this.fieldFontSizeValue > 0.0;
+  }
+
+  get hasOptionFontSize(): bool {
+    return this.optionFontSizeValue > 0.0;
+  }
+
+  get hasFieldHeight(): bool {
+    return this.fieldHeightValue > 0.0;
+  }
+
+  get hasOptionHeight(): bool {
+    return this.optionHeightValue > 0.0;
+  }
+
+  get hasChevronBoxSize(): bool {
+    return this.chevronBoxSizeValue > 0.0;
+  }
+
+  get hasChevronIconSize(): bool {
+    return this.chevronIconSizeValue > 0.0;
+  }
+
+  get fieldFontSizePx(): f32 {
+    return this.fieldFontSizeValue;
+  }
+
+  get optionFontSizePx(): f32 {
+    return this.optionFontSizeValue;
+  }
+
+  get fieldHeightPx(): f32 {
+    return this.fieldHeightValue;
+  }
+
+  get optionHeightPx(): f32 {
+    return this.optionHeightValue;
+  }
+
+  get chevronBoxSizePx(): f32 {
+    return this.chevronBoxSizeValue;
+  }
+
+  get chevronIconSizePx(): f32 {
+    return this.chevronIconSizeValue;
+  }
+}

package/src/controls/Dropdown.ts

@@ -22,21 +22,22 @@ import { PersistedInt32Codec, PersistedValueState } from "../core/PersistedState
 import { registerScrollHook } from "../core/ScrollHooks";
 import { FlexBox, Portal, ScrollBarVisibility, ScrollBox, ScrollView } from "../nodes";
 import { bind2 } from "../core/bind";
+import { DropdownSizing } from "./ControlSizing";
 import { getControlTemplates } from "./ControlTemplateSet";
 import {
-  defaultDropdownChevronTemplate,
+  createDefaultDropdownChevronPresenter,
   DropdownChevronPresenter,
   DropdownChevronTemplate,
   DropdownChevronVisualState,
 } from "./internal/DropdownChevronPresenter";
 import {
-  defaultDropdownFieldTemplate,
+  createDefaultDropdownFieldPresenter,
   DropdownFieldPresenter,
   DropdownFieldTemplate,
   DropdownFieldVisualState,
 } from "./internal/DropdownFieldPresenter";
 import {
-  defaultDropdownOptionRowTemplate,
+  createDefaultDropdownOptionRowPresenter,
   DropdownOptionRowPresenter,
   DropdownOptionRowTemplate,
   DropdownOptionRowVisualState,
@@ -74,31 +75,37 @@ class PersistedDropdownState extends PersistedValueState<Dropdown, i32> {
 
 const DROPDOWN_PERSISTED_STATE = new PersistedDropdownState();
 
-function createFieldPresenter(template: DropdownFieldTemplate | null): DropdownFieldPresenter {
+function createFieldPresenter(template: DropdownFieldTemplate | null, sizing: DropdownSizing | null = null): DropdownFieldPresenter {
   if (template !== null) {
     return template.create();
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.dropdownField : null;
-  return (appTemplate === null ? defaultDropdownFieldTemplate : appTemplate).create();
+  return appTemplate === null
+    ? createDefaultDropdownFieldPresenter(sizing)
+    : appTemplate.create();
 }
 
-function createChevronPresenter(template: DropdownChevronTemplate | null): DropdownChevronPresenter {
+function createChevronPresenter(template: DropdownChevronTemplate | null, sizing: DropdownSizing | null = null): DropdownChevronPresenter {
   if (template !== null) {
     return template.create();
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.dropdownChevron : null;
-  return (appTemplate === null ? defaultDropdownChevronTemplate : appTemplate).create();
+  return appTemplate === null
+    ? createDefaultDropdownChevronPresenter(sizing)
+    : appTemplate.create();
 }
 
-function createOptionRowPresenter(template: DropdownOptionRowTemplate | null): DropdownOptionRowPresenter {
+function createOptionRowPresenter(template: DropdownOptionRowTemplate | null, sizing: DropdownSizing | null = null): DropdownOptionRowPresenter {
   if (template !== null) {
     return template.create();
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.dropdownOptionRow : null;
-  return (appTemplate === null ? defaultDropdownOptionRowTemplate : appTemplate).create();
+  return appTemplate === null
+    ? createDefaultDropdownOptionRowPresenter(sizing)
+    : appTemplate.create();
 }
 
 export class DropdownItem {
@@ -111,9 +118,9 @@ class DropdownOptionNode extends FlexBox {
   private slotIndex: i32 = -1;
   private currentLabel: string = "";
 
-  constructor(template: DropdownOptionRowTemplate | null) {
+  constructor(template: DropdownOptionRowTemplate | null, sizing: DropdownSizing | null) {
     super();
-    this.presenter = createOptionRowPresenter(template);
+    this.presenter = createOptionRowPresenter(template, sizing);
     this.semanticRole(SemanticRole.ListItem);
     this.width(100.0, Unit.Percent);
     this.cursor(CursorStyle.Pointer);
@@ -136,9 +143,9 @@ class DropdownOptionNode extends FlexBox {
     return this;
   }
 
-  template(template: DropdownOptionRowTemplate | null): void {
+  template(template: DropdownOptionRowTemplate | null, sizing: DropdownSizing | null): void {
     const previousPresenter = this.presenter;
-    const nextPresenter = createOptionRowPresenter(template);
+    const nextPresenter = createOptionRowPresenter(template, sizing);
     this.presenter = nextPresenter;
     this.removeChildNode(previousPresenter.root);
     this.addChildNode(nextPresenter.root);
@@ -185,6 +192,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
   private fieldTemplateValue: DropdownFieldTemplate | null = null;
   private chevronTemplateValue: DropdownChevronTemplate | null = null;
   private optionRowTemplateValue: DropdownOptionRowTemplate | null = null;
+  private sizingValue: DropdownSizing | null = null;
   private fieldPresenter: DropdownFieldPresenter;
   private chevronPresenter: DropdownChevronPresenter;
   private readonly popupRoot: Portal;
@@ -215,8 +223,8 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
   constructor() {
     super();
     Dropdown.ensureScrollHook();
-    const fieldPresenter = createFieldPresenter(null);
-    const chevronPresenter = createChevronPresenter(null);
+    const fieldPresenter = createFieldPresenter(null, null);
+    const chevronPresenter = createChevronPresenter(null, null);
     const popupRoot = new Portal()
       .positionAbsolute()
       .position(0.0, 0.0)
@@ -340,11 +348,38 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     return this;
   }
 
+  sizing(sizing: DropdownSizing | null): this {
+    this.close();
+    this.sizingValue = sizing;
+    if (this.usesDefaultFieldPresenter()) {
+      this.replaceFieldPresenter(
+        createFieldPresenter(this.fieldTemplateValue, this.sizingValue),
+        createChevronPresenter(this.chevronTemplateValue, this.sizingValue),
+      );
+    } else if (this.usesDefaultChevronPresenter()) {
+      const previousPresenter = this.chevronPresenter;
+      const nextPresenter = createChevronPresenter(this.chevronTemplateValue, this.sizingValue);
+      this.chevronPresenter = nextPresenter;
+      this.fieldPresenter.chevronHost.removeChildNode(previousPresenter.root);
+      this.fieldPresenter.chevronHost.addChildNode(nextPresenter.root);
+      previousPresenter.root.dispose();
+    }
+    if (this.usesDefaultOptionRowPresenter()) {
+      for (let index = 0; index < this.optionNodes.length; ++index) {
+        unchecked(this.optionNodes[index]).template(this.optionRowTemplateValue, this.sizingValue);
+      }
+      this.refreshPanelLayout();
+    }
+    this.syncValueLabel();
+    this.handleThemeChanged();
+    return this;
+  }
+
   fieldTemplate(template: DropdownFieldTemplate | null): this {
     this.close();
     this.fieldTemplateValue = template;
-    const nextFieldPresenter = createFieldPresenter(template);
-    const nextChevronPresenter = createChevronPresenter(this.chevronTemplateValue);
+    const nextFieldPresenter = createFieldPresenter(template, this.sizingValue);
+    const nextChevronPresenter = createChevronPresenter(this.chevronTemplateValue, this.sizingValue);
     this.replaceFieldPresenter(nextFieldPresenter, nextChevronPresenter);
     this.syncValueLabel();
     this.handleThemeChanged();
@@ -355,7 +390,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     this.close();
     this.chevronTemplateValue = template;
     const previousPresenter = this.chevronPresenter;
-    const nextPresenter = createChevronPresenter(template);
+    const nextPresenter = createChevronPresenter(template, this.sizingValue);
     this.chevronPresenter = nextPresenter;
     this.fieldPresenter.chevronHost.removeChildNode(previousPresenter.root);
     this.fieldPresenter.chevronHost.addChildNode(nextPresenter.root);
@@ -368,7 +403,7 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     this.close();
     this.optionRowTemplateValue = template;
     for (let index = 0; index < this.optionNodes.length; ++index) {
-      unchecked(this.optionNodes[index]).template(template);
+      unchecked(this.optionNodes[index]).template(template, this.sizingValue);
     }
     this.refreshPanelLayout();
     this.syncOptionVisuals();
@@ -763,13 +798,21 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
 
   private ensureOptionNodes(): void {
     while (this.optionNodes.length < this.itemsValue.length) {
-      const optionNode = new DropdownOptionNode(this.optionRowTemplateValue).bindOwner(this, this.optionNodes.length);
+      const optionNode = new DropdownOptionNode(this.optionRowTemplateValue, this.sizingValue).bindOwner(this, this.optionNodes.length);
       this.optionNodes.push(optionNode);
     }
   }
 
   private resolveOptionRowHeight(): f32 {
     if (this.optionNodes.length == 0) {
+      const sizing = this.sizingValue;
+      if (
+        sizing !== null &&
+        sizing.hasOptionHeight &&
+        this.usesDefaultOptionRowPresenter()
+      ) {
+        return sizing.optionHeightPx;
+      }
       return OPTION_HEIGHT;
     }
     return unchecked(this.optionNodes[0]).rowHeight;
@@ -922,4 +965,28 @@ export class Dropdown extends FlexBox implements GlobalKeyHandler {
     this.replaceChildren(children);
     previousFieldRoot.dispose();
   }
+
+  private usesDefaultFieldPresenter(): bool {
+    if (this.fieldTemplateValue !== null) {
+      return false;
+    }
+    const templateSet = getControlTemplates();
+    return templateSet === null || templateSet.dropdownField === null;
+  }
+
+  private usesDefaultChevronPresenter(): bool {
+    if (this.chevronTemplateValue !== null) {
+      return false;
+    }
+    const templateSet = getControlTemplates();
+    return templateSet === null || templateSet.dropdownChevron === null;
+  }
+
+  private usesDefaultOptionRowPresenter(): bool {
+    if (this.optionRowTemplateValue !== null) {
+      return false;
+    }
+    const templateSet = getControlTemplates();
+    return templateSet === null || templateSet.dropdownOptionRow === null;
+  }
 }

package/src/controls/RadioButton.ts

@@ -1,27 +1,31 @@
 import { KeyEventType, SemanticCheckedState, SemanticRole } from "../core/ffi";
 import { activeTheme } from "../core/Theme";
+import { LabeledControlSizing } from "./ControlSizing";
 import { PressableLabeledControl } from "./internal/PressableLabeledControl";
 import { getControlTemplates } from "./ControlTemplateSet";
 import { RadioGroup } from "./RadioGroup";
 import {
-  defaultRadioIndicatorTemplate,
+  createDefaultRadioIndicatorPresenter,
   RadioIndicatorPresenter,
   RadioIndicatorTemplate,
   RadioIndicatorVisualState,
 } from "./internal/RadioIndicatorPresenter";
 
-function createIndicatorPresenter(template: RadioIndicatorTemplate | null): RadioIndicatorPresenter {
+function createIndicatorPresenter(template: RadioIndicatorTemplate | null, sizing: LabeledControlSizing | null = null): RadioIndicatorPresenter {
   if (template !== null) {
     return template.create();
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.radioIndicator : null;
-  return (appTemplate === null ? defaultRadioIndicatorTemplate : appTemplate).create();
+  return appTemplate === null
+    ? createDefaultRadioIndicatorPresenter(sizing)
+    : appTemplate.create();
 }
 
 export class RadioButton extends PressableLabeledControl {
   private indicatorPresenter: RadioIndicatorPresenter;
   private templateOverride: RadioIndicatorTemplate | null = null;
+  private sizingValue: LabeledControlSizing | null = null;
   private readonly valueText: string;
   private checkedValue: bool = false;
   private changedCallback: ((checked: bool) => void) | null = null;
@@ -54,9 +58,22 @@ export class RadioButton extends PressableLabeledControl {
     return this;
   }
 
+  sizing(sizing: LabeledControlSizing | null): this {
+    this.sizingValue = sizing;
+    this.setLabelFontSizeOverride(
+      sizing !== null && sizing.hasLabelFontSize ? sizing.labelFontSizePx : 0.0,
+    );
+    if (this.usesDefaultIndicatorPresenter()) {
+      this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
+      this.replaceIndicatorRoot(this.indicatorPresenter.root);
+      this.syncVisualState();
+    }
+    return this;
+  }
+
   template(template: RadioIndicatorTemplate | null): this {
     this.templateOverride = template;
-    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride);
+    this.indicatorPresenter = createIndicatorPresenter(this.templateOverride, this.sizingValue);
     this.replaceIndicatorRoot(this.indicatorPresenter.root);
     this.syncVisualState();
     return this;
@@ -132,4 +149,12 @@ export class RadioButton extends PressableLabeledControl {
       }
     }
   }
+
+  private usesDefaultIndicatorPresenter(): bool {
+    if (this.templateOverride !== null) {
+      return false;
+    }
+    const templateSet = getControlTemplates();
+    return templateSet === null || templateSet.radioIndicator === null;
+  }
 }

package/src/controls/Slider.ts

@@ -20,9 +20,10 @@ import { PersistedFloat32Codec, PersistedValueState } from "../core/PersistedSta
 import { Node } from "../core/Node";
 import { FlexBox } from "../nodes";
 import { bind1 } from "../core/bind";
+import { SliderSizing } from "./ControlSizing";
 import { getControlTemplates } from "./ControlTemplateSet";
 import {
-  defaultSliderTemplate,
+  createDefaultSliderPresenter,
   SliderPresenter,
   SliderTemplate,
   SliderVisualState,
@@ -63,18 +64,21 @@ const SLIDER_CONTENT_INSET: f32 = 1.0;
 const SLIDER_OUTER_INSET: f32 = SLIDER_CHROME_INSET + SLIDER_CONTENT_INSET;
 const SLIDER_CHILD_INSET: f32 = SLIDER_PADDING + SLIDER_CONTENT_INSET;
 
-function createSliderPresenter(template: SliderTemplate | null): SliderPresenter {
+function createSliderPresenter(template: SliderTemplate | null, sizing: SliderSizing | null = null): SliderPresenter {
   if (template !== null) {
     return template.create();
   }
   const templateSet = getControlTemplates();
   const appTemplate = templateSet !== null ? templateSet.slider : null;
-  return (appTemplate === null ? defaultSliderTemplate : appTemplate).create();
+  return appTemplate === null
+    ? createDefaultSliderPresenter(sizing)
+    : appTemplate.create();
 }
 
 export class Slider extends FlexBox implements DragGestureHost {
-  private sliderPresenter: SliderPresenter = createSliderPresenter(null);
+  private sliderPresenter: SliderPresenter = createSliderPresenter(null, null);
   private templateOverride: SliderTemplate | null = null;
+  private sizingValue: SliderSizing | null = null;
   private readonly disposables: Array<Disposable> = new Array<Disposable>();
   private readonly dragGesture!: DragGesture;
   private changedCallback: ((value: f32) => void) | null = null;
@@ -172,9 +176,23 @@ export class Slider extends FlexBox implements DragGestureHost {
     return this;
   }
 
+  sizing(sizing: SliderSizing | null): this {
+    this.sizingValue = sizing;
+    if (!this.usesDefaultPresenter()) {
+      return this;
+    }
+    this.replacePresenter(createSliderPresenter(this.templateOverride, this.sizingValue));
+    const thumbSize = this.sliderPresenter.metrics.thumbSize;
+    if (this.lengthValue <= thumbSize) {
+      this.lengthValue = thumbSize + 1.0;
+    }
+    this.syncPresentation();
+    return this;
+  }
+
   template(template: SliderTemplate | null): this {
     this.templateOverride = template;
-    const nextPresenter = createSliderPresenter(this.templateOverride);
+    const nextPresenter = createSliderPresenter(this.templateOverride, this.sizingValue);
     this.replacePresenter(nextPresenter);
     const thumbSize = this.sliderPresenter.metrics.thumbSize;
     if (this.lengthValue <= thumbSize) {
@@ -447,6 +465,14 @@ export class Slider extends FlexBox implements DragGestureHost {
     previousRoot.dispose();
   }
 
+  private usesDefaultPresenter(): bool {
+    if (this.templateOverride !== null) {
+      return false;
+    }
+    const templateSet = getControlTemplates();
+    return templateSet === null || templateSet.slider === null;
+  }
+
   private track(disposable: Disposable): void {
     this.disposables.push(disposable);
   }

package/src/controls/index.ts

@@ -1,5 +1,6 @@
 export { Button } from "./Button";
 export { Checkbox } from "./Checkbox";
+export { DropdownSizing, LabeledControlSizing, SliderSizing } from "./ControlSizing";
 export { ContextMenu, MenuItem } from "./ContextMenu";
 export { Dialog } from "./Dialog";
 export { Dropdown, DropdownItem } from "./Dropdown";